Twitter bootstrap 引导网格系统：您必须有12列，还是可以使用更少的列

是否需要使用col-sm-9在第二个div中设置12个col，或者我可以使用col-sm-4使输入字段变小。是否有其他方法使引导表单class=“form horizontal”中的输入字段变小

标签

我无法发表评论，因此我将此作为回答。据我所知，一行必须有12列，句点（编辑：我似乎不正确，请参阅注释）。因此，在所需的宽度列之后添加一个不占用空间的列：

<form class="form-horizontal">
    <div class="form-group">
       <label for="label" class="col-sm-3 control-label">Label</label>
       <div class="col-sm-5" style = "width: 20%;">        
          <input class="form-control textLabel" type="text" id="label" autocomplete="off"/>
       </div>
       <div class="col-sm-4" style = "width:0px; height:0px;">        
       </div>
    </div>             
</form>
<div class = "row">
    <div class = "col-sm-12" style = "background-color:red;">TESTING FOR RESIZE BEHAVIOR</div>
</div>

标签
调整大小行为的测试

除了你甚至不需要那个额外的列，除非你想坚持使用纯引导来调整大小。您只需保留sm-9，但请指定宽度：

<div class="col-sm-9" style = "width: 20%;">        
    <input class="form-control textLabel" type="text" id="label"   autocomplete="off"/>
</div>   

您可以使用col-sm-4，但是如果它小于7，下一列可能会在它旁边浮动——因此在div上使用clearfix

在col-X-4No之后，您不必拥有12个，您可以拥有少于12个，但不能超过12个，除非您每12列使用响应实用程序类和clearfix一次。如果拥有少于12个，会发生什么？它是否假设如果您总共有4个，并使四个宽度为100%？如果小于12，则下一列将浮动，除非您使用行或表单组或清除它。

<div class="col-sm-9" style = "width: 20%;">        
    <input class="form-control textLabel" type="text" id="label"   autocomplete="off"/>
</div>