html - 使 Bootstrap 输入字段保持一致

Question

我正在努力解决他的问题，我有 4 个输入字段，它们应该出现在一行中。每个字段还有一个标签，这个标签的文本长度可以变化。

我的问题的简化版

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <label>text</label> 
            <input class="form-control">
        </div>
        <div class="col-md-3">
            <label>text</label> 
            <input class="form-control">
        </div>
        <div class="col-md-3">
            <label>text</label> 
            <input class="form-control">
        </div>
        <div class="col-md-3">
            <label>text text text text text text text text text text text text text text text text text text text</label> 
       <input class="form-control">
       </div>
    </div>
</div>

JSFiddle (您可能需要调整输出的宽度，否则 bootstrap 将垂直显示)

正如您在这里看到的，最后一个输入字段与其他输入字段不一致，因为标签的文本占了 2 行。有办法解决这个问题吗？

Answer 1

你需要 form-group 在 col-md-12 容器中

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-3">
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
        </div>
    </div>
</div>

col-xs-12 是可选的。 https://jsfiddle.net/vladavip88/qfdbg022/