html - Bootstrap well - 使用特定元素或宽度的井

Question

我在页面上延伸了 4 个跨度，我想对前三个应用一口井。这将使井包裹在前 3 个跨度周围，为它们提供背景边距等...

我在第 4 个跨度之前使用了 ended the well 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>

Answer 1

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

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

你会看到

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

祝你好运