Question

This form（展开结果面板，因此只有2行），第一行有一个选择和一个文本字段。第二行有一个select，然后是一个嵌套在列中的2个文本字段。它必须是这种方式，因为在第二列中显示/隐藏其他字段。

两个文本字段不占用整个宽度，但我需要它们与第一行中文本框的宽度相匹配。

    <div class="form-group col-md-4">
      <select class="form-control col-md-4"><option value="1">Hi There</option></select>
    </div>
    <div class="form-group col-md-8">
      <input type="text" class="form-control"/>  
    </div>

    <div class="form-group col-md-4">
      <select class="form-control col-md-4"><option value="1">Hi There</option></select>
    </div>
    <div class="form-group col-md-8">
      <div class="form-group col-md-6">
        <input type="text" class="form-control"/>  
      </div>
      <div class="form-group col-md-6">
        <input type="text" class="form-control"/>  
      </div>
    </div>

  </form>
</div>

Answer 1

您滥用了列类。它必须拥有它自己的div。发生的事情是form-group类删除了列的边距。另外（据我所知，这并没有记录）形式水平内的form-group充当行本身。试试这个：

<form class="form-horizontal">
<div class="form-group">
  <div class="col-md-4">
    <select class="form-control col-md-4"><option value="1">Hi There</option></select>
  </div>
  <div class="col-md-8">
    <input type="text" class="form-control"/>  
  </div>
</div>
</form>

此处您的示例已重写：https://jsfiddle.net/reohda5t/4/

Bootstrap - 如何使嵌套列与外部col的宽度匹配

1 个答案: