Question

我想知道Bootstrap是否具有内置JS功能，可根据设备屏幕大小显示或隐藏行？ 可折叠列无法满足我的需求。

例如（伪代码）

if(screensize > 768px) {
<div class="row">
  <div class="col-md-8">
  <section>
    <ul>
      <li> <%= image_tag 'section_icons/cheese.png', class: 'section_img' %> Cheese </li>
      <li> <%= image_tag 'section_icons/wine.png', class: 'section_img' %> Wine </li>
    </ul>
  </section>
  </div>
  <div class="col-md-4">
    <div> other column content </div>
  </div>
</div>
} else {
<div class="row">
  <div class="col-xs-12">
  <section>
    <ul>
      <li> <%= image_tag 'section_icons/cheese.png', class: 'section_img' %> Cheese </li>
      <li> <%= image_tag 'section_icons/wine.png', class: 'section_img' %> Wine </li>
    </ul>
  </section>
    <div> other column content </div>
  </div>
</div>
}

Answer 1

看看http://getbootstrap.com/css/#responsive-utilities

我认为这就是你需要的东西

Answer 2

您应该使用CSS媒体查询。 Bootstrap 3有几个类来帮助你解决这个问题。

您应该使用hidden- * / visible- * CSS类来控制哪些元素以不同的大小可见/隐藏。

Bootstrap CSS documentation

Bootstrap根据屏幕大小显示某一行？

2 个答案: