如何在有一个长div的Bootstrap下收起div?

时间:2015-01-23 15:14:19

标签: twitter-bootstrap twitter-bootstrap-3 responsive-design

需要new div隐藏在oldie下面,所以tall div在右边很长。

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-7 col-xs-12 ">oldie</div>
        <div class="col-md-5 col-xs-12">
          <div class="tall">rightie</div>
        </div>
        <div class="col-md-7 col-xs-12">new div</div>
      </div>
    </div>
</body>

Code Pen Example

然后确保在移动视图中订单是:

oldie
rightie
new div

1 个答案:

答案 0 :(得分:0)

不幸的是,除非你复制 new div 的内容,否则这在Bootstrap中是不可能的。

小屏幕的那个应该让课程.hidden-md.hidden-lgmdlg屏幕上隐藏它们。大屏幕的一个应该是一个嵌套网格和 oldie div,并让.hidden-xs.hidden-sm隐藏在xs和{{{ 1}}屏幕。

sm
.box {
  border: 1px solid #c66;
  background-color: #f99;
  height: 50px;
  line-height: 50px;
}
.box--tall {
  height: 250px;
  line-height: 250px;
}