Question

我正在重温Bootstrap并测试嵌套在container-fluid - ＆gt;中的输入字段container - ＆gt; row-fluid但是输入字段在使用row或row-fluid时没有很好地包装。

为什么默认情况下无法正常处理？而且，我该如何解决这个问题？

我可以使用预定义的Bootstrap类，例如input-large，input-xlarge和put custom 在容器或行周围填充，但它不是一个优雅的解决方案。

Answer 1

<div class="container-fluid" style="background-color:black;">

        <div class="row-fluid">
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
            <div class="span3">
                <label>test</label>
                <input type="text" class="input-block-level">
            </div>
        </div>

</div>

使用液体容器时，您也不需要放置固定容器。另外，使用Bootstrap时，应避免在元素上明确定义宽度：使用grid和css类，否则会产生奇怪的结果。

输入元素可以转换为具有“input-block-level”类的块元素（不要使用width = 100％，因为Bootstrap使用负边距在网格上放置元素，这将不起作用，因为你可以看到。）

PLUS：在流体网格中使用嵌套行的示例：

<div class="container-fluid" style="background-color:black;">

        <div class="row-fluid">
            <div class="span10 offset1">

                <div class="row-fluid">
                    <div class="span12">
                        <label>test</label>
                        <input type="text" class="input-block-level">
                    </div>
                </div>

            </div>
        </div>

</div>

通过使用流体网格（12列）和偏移量，您几乎可以获得所需的任何布局。上面的示例显示了一种通过使用偏移量将流体元素置于另一个流体元素中心的方法。

span10 + offset1 = 11列。所以你右边还有一列：这是居中的。

记住：每行有12列，从左边开始。

12列为100％，9 = 75％，6 = 50％，3 = 25％等。

Twitter Bootstrap - 输入容器内的字段

1 个答案: