在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屋！