html - 将 Bootstrap 列放在下面

标签 html twitter-bootstrap css

我发现这个问题很难在标题中描述。

我有一个 col-md-8 和一个 col-md-4 分类的 div。这为我提供了一个不错的侧边栏样式布局。因此,当它包裹在较小的设备上时,它会堆叠。但是我有另一个 col-md-8 div,其中包含我想放在另一个 col-md-8 下面的内容但是因为 Bootstrap 就是这样,它倾向于将其视为行。

查看我的codepen mockup我做的。 (基本上我希望下面的段落与最上面的段落相遇,然后被我的侧边栏推下。)这可能吗?谢谢!

编辑 我刚刚在 Balsamiq 中制作了一个快速模型:平板电脑:https://i.imgur.com/U5xC7g3.png手机:https://i.imgur.com/FvZG0IZ.png

希望这是有道理的

最佳答案

大概是这样的:

<div class="col-md-8 pull-left">content1</div>
<div class="col-md-12 col-xs-12 col-lg-4 pull-right">sidebar</div>
<div class="col-md-8 pull-left">content2~3</div>

http://codepen.io/anon/pen/vKbEBQ

关于html - 将 Bootstrap 列放在下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38920212/

相关文章:

HTML5 的新 &lt;header&gt; 元素

javascript - 如果 URL 更改,则重定向页面返回

html - 未应用外部文件中的 SVG 过滤器

jquery - Bootstrap X-可编辑、文本区域的清除按钮

javascript - 如何让div自动滚动到底部

css - 我需要为每个宽度范围添加媒体查询吗?

javascript - 我的登录页面 javascript 按钮不工作

html - 在 bootstrap 中有多个行和列在彼此内部是一种好的做法

css - Bootstrap : How to change the breakpoint where the navbar collapse ?

javascript - 为什么 ContentEditable 在 Firefox 中很糟糕