Bootstrap中是否有一种方法可以“拆分"小屏幕上的一列? [英] Is there a way in Bootstrap to "split" a column on small screens?

问题描述

我正在使用Bootstrap 3. 在大屏幕上，我想在左侧有一个侧边栏，在右侧有maincontent.在小屏幕上，我想在顶部有侧边栏的重要块，然后是maincontent，然后是侧边栏的次要块.有办法实现吗?

I'm using Bootstrap 3. On large screens I want to have a sidebar on the left and the maincontent on the right. On small screens I want to have important blocks of the sidebar on top, then the maincontent, then the less important blocks of the sidebar. Is there a way to achieve that?

这是一个显示问题的JS Bin: http://jsbin.com/wibucopi/1/，下面是当前代码(但是，所有侧边栏内容都在小屏幕顶部显示).

Here's a JS Bin showing the problem: http://jsbin.com/wibucopi/1/ and below is the current code (which, however, displays all sidebar content on top on small screens).

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <div class="upper" style="background:red">
        <h3>I want to be <b>above</b> the main content on small screens!</h3>
      </div>
      <div class="lower" style="background:green">
        <h3>I want to be <b>below</b> the main content on small screens!</h3>
      </div>
    </div>
    <div class="col-sm-9">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </div>
</div>

我已经玩过col-sm-pull/push-x，但只能在小屏幕的主要内容下方显示整个侧栏.

I've already played around with col-sm-pull/push-x, but I could only achieve that the whole sidebar is displayed below the maincontent on small screens.

我不想复制内容并使用visible-XY，hidden-XY显示/隐藏它，因为页面会变大并且感觉不对.

I don't want to duplicate content and show / hide it with visible-XY, hidden-XY, as the page would get bigger and it feels just wrong.

最好有一个纯Bootstrap CSS 解决方案，或者至少有一个CSS(我不想使用js).

It would be great to have a pure Bootstrap css solution, or at least a css only one (I wouldn't like to use js).

推荐答案

您可以执行以下操作:

HTML:

<div class="container-fluid">
  <div class="row">
    <div class="upper col-sm-3" style="background:red">
      <h3>I want to be <b>above</b> the main content on small screens!</h3>
    </div>
    <div class="col-sm-9 col-sm-pull-right">
      <h1>Main content</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
    </div>    
    <div class="lower col-sm-3" style="background:green">
      <h3>I want to be <b>below</b> the main content on small screens!</h3>
    </div>
  </div>
</div>

CSS:

@media (min-width: 768px) {
  .col-sm-pull-right {
      float: right;
  }
}
.lower {
  clear: left;
}

这篇关于Bootstrap中是否有一种方法可以“拆分"小屏幕上的一列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！