在Bootstrap网格中动态更改列数 [英] Changing number of columns dynamically in Bootstrap grids
问题描述
我正在尝试为台式机浏览器设计布局,为平板电脑浏览器设计其他布局.
I'm trying to design a layout for desktop browsers and other layout for tablet browsers.
我想在台式机浏览器中看到3 + 9列(边栏为3,内容为9),平板电脑中为12列(仅内容). 我不需要平板电脑的侧边栏,因此在这种情况下,我需要显示液体含量(宽度100%)
I want to see 3+9 columns in desktop browsers (3 for sidebar and 9 for content), and 12 columns (only content) in tablets. I don´t need the sidebar in tablets, so I need show fluid content in that case (width 100%)
我编写了这段代码,并且可以在桌面浏览器上正常工作,但是当我在平板电脑浏览器中对其进行测试时,我只会看到9列.
I wrote this code and it works fine with desktop browser, but when I test it in a tablet browser I see only 9 columns.
有人可以帮助我吗?
谢谢
...
<div class="row-fluid">
<div class="span3 visible-desktop">
<!-- Render Sidebar -->
</div>
<div class="span9">
<!-- Render Content-->
</div>
</div>
...
推荐答案
在CSS的结尾处尝试以下操作:
Try something like this at the end of your css:
@media (max-width: 979px){
.span9 {width: 100% !important;}
}
您可能想要向该范围添加一个附加类,例如"content",然后将规则更改为以".content"和".span9"为目标
You may want to add an additional class to that span such as 'content', and change the rule to target '.content' verus '.span9'
这篇关于在Bootstrap网格中动态更改列数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!