Bootstrap很好 - 使用一个井到某个元素或宽度

时间:2013-08-05 10:20:57

标签: html5 css3 twitter-bootstrap

我在整个页面上有4个跨度,并希望在前三个中应用一个井。这样就可以让井在前3个跨度中包裹,从而为它们提供背景边缘等......

我使用了在第4个跨度之前结束了井的div但是它仍然在页面上延伸移动下面的第4个跨度。是的我可以将css应用到位置但是如果可能的话就想避免。请参阅bootply - http://bootply.com/71961

        <div class="row-fluid">
        <div class="well">
                            <ul class="thumbnails">
                    <li class="span3">
                    <div class="thumbnail searchthumb">
                        <a href="#"><img alt="200x200" src="http://placehold.it/200x200"></a>


                    </div>
                    </li>
                    <li class="span3">
                    <div class="thumbnail searchthumb">
                        <a href="#"><img alt="200x200" src="http://placehold.it/200x200"></a>

                    </div>
                    </li>
                    <li class="span3">
                    <div class="thumbnail searchthumb">
                        <a href="#"><img alt="200x200" src="http://placehold.it/200x200"></a>

                    </div>
                    </li>
                    </div>
                    <li class="span3">
                    <div class="thumbnail searchthumb">
                        <a href="#"><img alt="200x200" src="http://placehold.it/200x200"></a>

                    </div>
                    </li>
                </ul>
        </div>

1 个答案:

答案 0 :(得分:1)

一个井添加填充因此你必须小心如何使用它,或者你可以打破网格,正如你的例子所发生的那样。

这是一个看起来很有希望的变体:http://bootply.com/71967

你会看到

  • 我创建了一个新的span9列,它包含一个新的井段(以防止网格中断)
  • 在井内我使用嵌套的行液网格
  • 我已将嵌套列更改为span4(它是嵌套的行 - 流体网格,因此它们添加到12)
  • 您示例中的第四个li缺少其ul父级
祝你好运