有一个使用Bootstrap的默认方法或我如何编辑以便在767px(移动)下执行该操作,每行内的每个跨度不会变为100％？
我只是想让他们达到50％……例如并排2个跨度,而不是一个低于另一个.
提前致谢
最佳答案
我知道这个问题已经过时但我在寻找解决同样问题的方法时遇到了它,然后我自己想出来了.我想我应该发布我的解决方案以防其他人找到这个页面.
我的问题是我有一个响应式Bootstrap页面有四列(四个span3列表项)和另一个页面有三列(三个span4列表项).我希望它们在767px以下时变成两列.对于四列页面,我的结构是这样的,在span12内重复多次行液：
我的结构对于三列页面来说就像这样,再次在span12内重复多次排液：
该结构取自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/
