Question

我试图在两个输入组之间放置一个元素，然后附加两个按钮，但是对齐和大小调整完全不可用。在v3.3.7中可以正常使用，但是由于升级到v4.1后，我无法正常工作。

这是3.3.7中的样子：

这是我的3.3.7代码：

constructor(props){
 super(props);

 this.state ={
  errors: {},
}

handleSubmit(event) {
  event.preventDefault();

  const email = this.email.value;
  const password = this.password.value;

  if(password.length > 6){
    this.state.errors.password= "Password must be at least 6 characters";
  }
  const creds = {email, password}

  if(creds){
    this.props.signUp(creds);
    this.props.history.push('/');

  }
}

render() {
 return (
  <div className="container">
    <div className="row">
      <div className="col-md-6">
        <h1>Sign Up</h1>
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label htmlFor="exampleInputEmail1">Email address</label>

            <input
              name="email"
              type="email"          
              className="form-control"
              id="email"
              ref={(input) => this.email = input}
              aria-describedby="emailHelp"
              placeholder="Enter email" />
            <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div className="form-group">
            <label htmlFor="exampleInputPassword1">Password</label>
            {this.password > 6 &&
               //display an error here
              <h2>{this.state.errors.password}</h2>
            }
            <input
              name="password"
              type="password"
              ref={(input) => this.password = input}
              value={this.state.password}
              className="form-control"
              id="password"    
              placeholder="Password" />

          </div>



          <button type="submit" className="btn btn-primary">Submit</button>
        </form>
      </div>

    </div>
  </div>

  );
 }

}

这是4.1中的样子：

这是我的4.1代码：

<div class="col-lg-10 text-right">
    <form role="form" class="form-inline" method="get">
        <div class="form-group" id="data_5">
            <div class="input-group my-2" id="datepicker">
                <input type="date" class="input-sm form-control" name="start_date" value="2019-01-03" max="2019-01-04">
                <span class="input-group-addon">to</span>
                <input type="date" class="input-sm form-control" name="end_date" value="2019-01-03" max="2019-01-04">
            </div>
        </div>
        <button class="btn mt-2 btn-sm btn-success" type="submit">Update</button>
        <button type="button" class="reset btn mt-2 btn-sm btn-primary" data-column="0" data-filter="">
            <i class="bootstrap-icon-white glyphicon glyphicon-filter"></i> Reset filters
        </button>
    </form>
</div>

我的代码迁移有什么问题？

Answer 1

这是我可以连接到 Bootstrap 4 的最佳端口。我将仅解释主要变化：

1）要在两个输入之间放置一个插件，请使用：

<input class="form-control">
<div class="input-group-prepend input-group-append">
  <span class="input-group-text">to</span>
</div>
<input class="form-control">

2） Glyphicons不随Bootstrap 4一起提供，所以我改用font-awesome。

3）我将按钮上的mt-2类替换为ml-2类。

其余详细信息可以在下一个示例中查看：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class="container-fluid">
<div class="row">

<!-- Porting begin -->
<div class="col-lg-10">

  <form role="form" class="form-inline" method="get">

    <div class="form-group" id="data_5">
      <div class="input-group input-group-sm my-2" id="datepicker">
        <input type="date" class="form-control" name="start_date" value="2019-01-03" max="2019-01-04">
        <div class="input-group-prepend input-group-append">
          <span class="input-group-text">to</span>
        </div>
        <input type="date" class="form-control" name="end_date" value="2019-01-03" max="2019-01-04">
      </div>
    </div>

    <button class="btn btn-sm btn-success ml-2" type="submit">Update</button>
    <button type="button" class="reset btn btn-sm btn-primary ml-2" data-column="0" data-filter="">
      <i class="fas fa-filter"></i> Reset filters
    </button>

  </form>
  
</div>
<!-- Porting end -->

</div>
</div>

此外，如果您想对包装表单的列右侧的所有元素进行对齐，请使用：

<div class="col-lg-10 d-flex justify-content-end">

代替：

<div class="col-lg-10">

两个输入之间的Bootstrap 4输入组附加组件

1 个答案: