bootstrap 3 中的嵌套列太小

Question

当我尝试在 col-md-4 列中嵌套两个 col-md-2 列时，嵌套的列太小，更像是 md-1 或更少。我按照 documentation 的建议在外部标签内使用了一行。我尝试将所有 "md" 更改为 "lg" 和 "sm"，但这没有任何区别。如何使我的第二行嵌套输入与我的第一行非嵌套输入对齐？

截图：

Jsfiddle version (resize the result pane so that the controls are beside each other)

<div class="container" id="content">
    <form>        
    <div class="row">
        <div class="col-md-2">Label
            <input value="nonnested input">
        </div>
        <div class="col-md-2">Label
            <input value="nonnested input">
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="form-group col-md-4">
            Label across two inputs, Label across two inputs
            <div class="row">
                <div class="col-md-2">
                    <input value="nested input 1" >
                </div>
                <div class="col-md-2">
                    <input value="nested input 2" >
                </div>
            </div>
        </div>
        </div>
    </form>
</div>

Answer 1

啊，我明白了！嵌套列的总数需要达到 12 以填充外部标记的宽度。所以我的第二组输入应该是这样的：

<div class="form-group col-md-4">
    Label across two inputs, Label across two inputs
    <div class="row">
         <div class="col-md-6">
             <input value="nested input 1" >
         </div>
         <div class="col-md-6">
             <input value="nested input 2" >
         </div>
     </div>
</div>

bootstrap 3 中的嵌套列太小

Nested columns are too small in bootstrap 3

twitter-bootstrap-3