5

Bootstrap 有一个默认方法，或者我如何编辑以在 767px（移动）以下执行此操作，每个跨度在一行中不会变为 100%？我只希望他们达到 50% ......例如有 2 个并排的跨度，而不是一个在另一个下方。

提前致谢

4

3 回答 3

3

我知道这个问题很老，但我在寻找解决同样问题的方法时遇到了它，然后我自己想通了。我想我应该发布我的解决方案，以防其他人找到这个页面。

我的问题是我有一个响应式引导页面，其中包含四列（四个 span3 列表项）和另一个包含三列（三个 span4 列表项）的页面。我希望它们在 767 像素以下时变成两列。对于四列页面，我的结构是这样的，行流体在 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
}
}

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

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

链接到在 CSS 中使用正确的选择器：http: //jsfiddle.net/rUCgS/4/

于 2012-10-04T22:56:55.520 回答
1

我只是修改了.row-fluid [class*="span"]inside的行为，@media (max-width: 767px) { ... }并在我点击max-width: 480px. 我还在.span-control一行的前 2 个跨度中添加了一个类，以确保它们都删除了左边距。

应该看起来像这样

这些!important标签对 jsfiddle 很有用，但您的样式表中不需要它们。

于 2013-01-30T17:06:19.427 回答
0

尝试使用 row-fluid 代替带有两个 span6 的 row。

HTML：

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' />
<div id='wrap' class='container'>
        <div id='row1' class='row-fluid'>
            <div id='box1' class='span6'>
               box1
            </div>
             <div id='box2' class='span6'>
                 box2
                </div>
        </div>
</div>

CSS：

#wrap{
    background-color:black;
    height:50px;
}
#box1{
        background-color:green;
}

#box2{
        background-color:red;
}

在这里检查jsFiddle

于 2012-08-30T20:55:12.907 回答