如何在引导程序中定位侧边栏？

【问题标题】：How to position sidebar in bootstrap?如何在引导程序中定位侧边栏？
【发布时间】：2014-07-29 22:59:49
【问题描述】：

我正在尝试将侧边栏定位在基于 Bootstrap 网格的站点的右侧。

嗯，这是我制作的非常简化的布局 - jsFiddle

我承认引导类（行等）的使用不好，但它确实有效。

问题是：侧边栏 html 代码必须在文本和内容下方（因为 SEO），所以它必须以某种方式定位在内容旁边（类 .content）。

我尝试将其定位为相对元素，但没有任何运气。

.text div中的文字没有静态高度，会变化
.content 每次都具有相同的高度

【问题讨论】：

标签： html css twitter-bootstrap sidebar

【解决方案1】：

这就是你所追求的吗？

<div class="container">
    <div class="row">
        <div class="col-xs-9 pull-right">
            <div class="col-xs-12 content">Main</div>
            <div class="col-xs-12 text">Lorem</div>
        </div>
        <div class="col-xs-3 sidebar pull-left">
            <p>sidebar</p>
        </div> 
    </div>
</div>

jsFiddle

基本上，我已将您的整个容器 3 拆分为 9，然后将您的 'content' 和 'text' 块设置为 '9' 列的子级。然后我将pull-left 和pull-right 类都应用到相关容器。

我还稍微修复了您的 HTML，因为它缺少 div 标记。我还去掉了一些文本，使代码对我来说更具可读性！

【讨论】：