Question

我们在span12 - 容器中堆叠span8 - 并尝试连续放置四个缩略图。可悲的是，最后<li>打破了下一行，虽然screenize允许所有四个缩略图都适合连续。

与其他组合相同，例如6x span2 ...

我建立了一个显示这种行为的小提琴： http://jsfiddle.net/PnWjT/

有任何建议如何解决这个问题？

Answer 1

您的布局问题在于您错误地堆叠了引导类，这就是为什么您的布局没有按照您希望的方式运行的原因。

以此为例：

<div class="container">
   <div class="container-fluid"> .. </div>
</div>

在这里，您尝试在固定容器div .container-fluid中堆叠流体容器div .container，从而取消.container-fluid div。这两个包含div用于封装您想要的布局，而不是相互堆叠，所以只使用一个。

您的堆栈的另一个问题如下：

<div class="span8">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid">
                 ......

在这里，您要在span12 div（.row-fluid内的宽度65.812％）中堆叠span8 div（.row-fluid容器内的宽度100％）div，从而因为你的span12 div溢出较小的容器span8 div并且没有正确调整以调整大小更改，因此内容被推向右侧。您应该将span div相应地叠加到它们的宽度上，例如span12/2 = span6, span4*2 = span8, span5 + span5 = span10等等......

这是一个demo，其中包含正确的堆栈重新设计。注意侧边栏如何放置span4 div以及span8，span4 + span8 = span12上的内容，除非您创建自己的类，否则不能高于span12。

bootstrap：响应span12中的四个span3-thumbnails

1 个答案: