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/

Answer 2

在媒体查询中设置标签高度;

@media(min-width:992px){ /* default bootstrap md width */
  label {
    min-height:70px; /* adjust as appropriate */
  }
}

当页面的宽度> = 992px

时，上面的示例将为标签元素提供70px的高度

https://jsfiddle.net/ue7bn8qd/12/

Answer 3

表单控件类中有两个css属性。

display：block;
宽度：100％;

由于这些属性输入字段的行为类似于块。这就是为什么他们不是内联的原因。编辑这两个属性以使输入字段内联。

将引导输入字段保持在一行

3 个答案: