1

我正在重新访问Bootstrap并测试嵌套在container-fluid-> container->中的row-fluid输入字段，但输入字段没有很好地包装在使用行或行流体中。

这是jsFiddle

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

我可以使用预定义的 Bootstrap 类，例如 input-large、input-xlarge 并在容器或行周围放置自定义填充，但这不是一个优雅的解决方案。

4

1 回答 1

2

看看：http: //jsfiddle.net/FTXa7/6/

<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 类，否则您会得到奇怪的结果。

输入元素可以转换为具有“输入块级别”类的块元素（不要使用 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 列。所以你在右边仍然有 1 列：这是居中的。

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

12 列是 100%、9 = 75%、6 = 50%、3 = 25% 等。

于 2013-07-05T03:12:57.380 回答