0

我在页面上有 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>
4

1 回答 1

1

井会添加填充，因此您必须小心使用它，否则可能会破坏网格，就像您的示例一样。

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

你会看到

  • 我创建了一个新的 span9 列，其中包含一个新的井 div（以防止网格中断）
  • 在井内我使用嵌套的行流体网格
  • 我已将嵌套列更改为 span4（这是一个嵌套的行流体网格，因此它们添加到 12）
  • 您示例中的第四个 li 缺少其 ul 父级

祝你好运

于 2013-08-05T11:40:06.567 回答