Bootstrap Grid System：你必须有 12 列还是可以使用更少的列答案

【问题标题】：Bootstrap Grid System: do you have to have 12 columns or can use use fewer columnsBootstrap Grid System：你必须有 12 列还是可以使用更少的列
【发布时间】：2015-03-16 17:20:49
【问题描述】：

是否需要使用 col-sm-9 在第二个 div 中制作 12 col 或者我可以使用 col-sm-4 使输入字段变小。是否有其他方法可以在引导表单中使输入字段变小 class="形式-水平”。

<form class="form-horizontal">
            <div class="form-group">
               <label for="label" class="col-sm-3 control-label">Label</label>
               <div class="col-sm-9">        
                  <input class="form-control textLabel" type="text" id="label" autocomplete="off"/>
               </div>
            </div>             
    </form>

【问题讨论】：

您可以使用 col-sm-4，但如果它小于 7，下一列可能会浮动在它旁边 - 所以在 col-X- 之后的 div <div class="clearfix"></div> 上使用 clearfix 4

标签： twitter-bootstrap

【解决方案1】：

我无法发表评论，所以我将其作为答案。据我了解，您必须连续有 12 列，句号（编辑：我似乎不正确，请参阅 cmets）。因此，您在所需的宽度列之后添加一个不占用空间的列：

<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>

【讨论】：

不，您不必有 12 个，可以少于 12 个，但不能超过 12 个，除非您使用响应式实用程序类并每 12 列 clearfix 一次
如果少于 12 个会怎样？它是否假设如果你总共有 4 个，并使四个 100% 的宽度？
如果下一列小于 12，它将浮动，除非您使用行或表单组或清除它。