Question

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

它开始时我正在为我的网站创建一个表单。输入框碰巧嵌套在其他一些元素中，因为这就是我确定网站必须结构化的方式。但是，令我困扰的是输入框非常小（不足以看到用户可能会输入的所有文本）。

我在JSFiddle上对它进行了测试，结果表明，当你嵌套div时，即使每个<div class="col-lg-12">都是{{1}}，内容也会变得越来越小。 Here's the fiddle.

我的问题是，我该如何避免这种萎缩？如何嵌套元素但仍保持整个宽度？

我正在寻找适当的＆＃34;适当的＆＃34;这样做的方式，而不是会弄乱网站其他部分的东西。

Answer 1

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

因此，每次在另一列中添加一列时，会有一些填充物缠绕在它周围，并且它会不断累积你添加的更多。

但是，这是＆＃39;行＆＃39;的目的的一部分。 bootstrap中的类..它上面设置了负左右边距，等于填充，允许最左边和最右边列的外部填充被否定，并生成与其容器齐平的列。 / p>

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

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

我已经更新了你的小提琴来表明这一点：

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

行宽随每个新div而缩小，即使每个div都是完整的12列

1 个答案: