Bootstrap 中有没有办法“拆分"?小屏幕上的专栏? [英] Is there a way in Bootstrap to "split" a column on small screens?

查看：18
本文介绍了Bootstrap 中有没有办法“拆分"?小屏幕上的专栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Bootstrap 3.在大屏幕上，我希望左侧有一个侧边栏，右侧有主要内容.在小屏幕上，我希望侧边栏的重要块在顶部，然后是主要内容，然后是侧边栏的不太重要的块.有没有办法做到这一点?

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

<div class="row"><div class="col-sm-3"><div class="upper" style="background:red"><h3>我想成为<b>上面</b>小屏幕上的主要内容！</h3>
<div class="lower" style="background:green"><h3>我想成为<b>下面</b>小屏幕上的主要内容！</h3>

<div class="col-sm-9"><h1>主要内容</h1><p>Lorem ipsum dolor sat amet</p>

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

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

拥有一个纯 Bootstrap css 解决方案会很棒，或者至少只有一个 css(我不想使用 js).

解决方案

你可以这样做:

Bootply 演示

HTML:

<div class="row"><div class="upper col-sm-3";样式=背景:红色"><h3>我想成为<b>上面</b>小屏幕上的主要内容！</h3>
<div class="col-sm-9 col-sm-pull-right"><h1>主要内容</h1><p>Lorem ipsum dolor sat amet</p><p>Lorem ipsum dolor sat amet</p><p>Lorem ipsum dolor sat amet</p><p>Lorem ipsum dolor sat amet</p><p>Lorem ipsum dolor sat amet</p>

<div class="lower col-sm-3";样式=背景:绿色"><h3>我想成为<b>下面</b>小屏幕上的主要内容！</h3>

CSS:

@media(最小宽度:768px){.col-sm-拉右{浮动:对；}}.降低 {清除:左；}

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?

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>

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.

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.

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).

解决方案

You could do something like this:

Bootply Demo

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆