CSS- Bootstrap : below 767px viewports 2 spans (or more) per rows instead of 1

Question

Bootstrap 有一个默认方法，或者我如何编辑以在低于 767px(移动)的情况下做到这一点，一行中的每个跨度不会变成 100%？我只希望它们达到 50% ...例如并排放置 2 个跨度，而不是一个在另一个下方。

提前致谢

Answer 1

我知道这个问题很老，但我在寻找同一问题的解决方案时遇到了它，然后我自己弄明白了。我认为我应该发布我的解决方案以防其他人找到此页面。

我的问题是我有一个包含四列(四个 span3 列表项)的响应式 Bootstrap 页面和一个包含三列(三个 span4 列表项)的页面。我希望它们在 767px 以下时都变成两列。对于四列页面，我的结构是这样的，row-fluid 在 span12 中重复了几次:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
        </ul>
    </div>
  </div>

对于三列页面，我的结构是这样的，在 span12 中再次使用 row-fluid 重复了几次:

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span4"></li>
            <li class="span4"></li>
            <li class="span4"></li>
        </ul>
    </div>
</div>

该结构取自关于缩略图的 Bootstrap 部分。这是我添加的 CSS，使它们都变成 767px 以下的两列:

@media screen and (max-width: 767px) {
/* remove clear from each ul to stop them from breaking into rows */
ul.thumbnails::after {
    clear: none;
}

/* make the width of each span equal to 47% instead of 100%.
You could make it closer to 50% if you have no borders or padding etc. */
ul.thumbnails li[class*="span"]{
    width: 47%; 
    float: left;
}
    // select the second span in each row (ul) on the 3 column page
[class*="span"] .span4:nth-child(2),
    // select the first span in the even rows on the 3 column page
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1),
    // select the even spans in each row on the 4 column page
[class*="span"] .span3:nth-child(even)
{
    float: right; //float them all to the right
}
}

如果您不使用相同的结构，则必须调整这些选择器。它们也不是最优雅的选择器，所以如果你能把它们写得更好，请写。一旦我让他们开始工作，我就懒得再和他们一起玩了。我希望这对某人有帮助!

[edit] 我刚刚注意到我实际上在我的所有代码中都使用了 fluid-row，而不是 row-fluid...所以您可能需要将其更改为那个。不过，流体行在我的样式表中没有任何规则。

在 CSS 中调整正确选择器的链接:http://jsfiddle.net/rUCgS/4/