推/拉我的布局问题 [英] Issue with push/pulling my layout

问题描述

我有一个简单的布局，带有侧边栏 (col-3) 和内容 (col-9)

[3] [9]

我正在尝试得到它，所以在 xs 端我的布局是

[内容][侧边栏]

所以我尝试将 col-xs-push-12 添加到侧边栏并将 col-xs-pull-12 添加到内容，但是，任何大小屏幕一切都消失了.

我的 HTML 设置如下

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-xs-push-12" id="globalSidebar">...

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-pull-12" id="mainContent">...

我见过 this 问题是我从哪里得到推/拉，但它似乎没有用.

这是我可以在引导程序中完成的事情还是我需要做其他事情来实现这一目标?

解决方案

如果您认为移动优先"，并且对较大的屏幕宽度使用推/拉，它应该像这样工作..

内容
<div class="col-sm-3 col-sm-pull-9" id="globalSidebar">侧边栏

演示

I have a simple layout, with a sidebar (col-3) and content (col-9)

[3] [9]

I'm trying to get it so at xs side my layout is

[Content]
[Sidebar]

So I tried adding col-xs-push-12 to the sidebar and col-xs-pull-12 to the content, however, with that at any size screen everything disappears.

My HTML is set up like

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 col-xs-push-12" id="globalSidebar">
    ...
</div>


<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 col-xs-pull-12" id="mainContent">
       ...
</div>

I've seen this question which is where I got the push/pull from, but it didn't seem to work.

Is this something I can do in just bootstrap or will I need to do something else to achieve this?

解决方案

If you think "mobile-first", and use the push/pull for the larger screen widths, it should work like this..

<div class="col-sm-9 col-sm-push-3" id="mainContent">
    content
</div>
<div class="col-sm-3 col-sm-pull-9" id="globalSidebar">
    sidebar
</div>

Demo

这篇关于推/拉我的布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！