html - 每个新的 div 都会缩小行宽，即使每个 div 都是完整的 12 列

Question

我在 Bootstrap 中遇到了一个有趣的问题。

它始于我为我的网站创建表单时。输入框恰好嵌套在其他几个元素中，因为这就是我确定网站必须构建的方式。然而，令我困扰的是输入框非常小(不足以看到用户可能会输入的所有文本)。

我在 JSFiddle 上测试了它，事实证明当你嵌套 div 时s，即使每一个都是<div class="col-lg-12"> ，内容越来越小。 Here's the fiddle.

我的问题是，如何避免这种收缩？如何在嵌套元素的同时仍保持完整宽度？

我正在专门寻找执行此操作的“正确”方法，而不是会弄乱网站其余部分的方法。

Answer 1

发生这种情况的原因是因为 bootstrap 在其所有列上设置了填充(基于变量中的设置)。

因此，每次您在另一列中添加一列时，都会在其周围包裹一些填充，并且随着您添加的越多，它会不断增加。

但是，这是 bootstrap 中“行”类的目的的一部分。它设置了负的左右边距，等于填充，允许最左边和最右边的外部填充要否定的列，并生成与其容器齐平的列。

因此，简而言之，最好的解决方案就是确保每个嵌套列依次嵌套在一行中，如下所示:

<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-12"> ... </div>
        </div>
    </div>
</div>

我已经更新了你的 fiddle 来展示这个:

http://jsfiddle.net/zb4dc/135/