Question

我试图在基于Bootstrap网格的网站右侧放置侧边栏。

嗯，这是我所做的非常简化的布局 - jsFiddle

我承认它不是很好地使用了引导类（行等），但是它有效。

问题是：侧边栏html代码必须位于文字和内容之下（因为搜索引擎优化），所以必须以某种方式将定位在内容旁边（类< EM>。内容）。

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

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

Answer 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分开，然后制作了您的内容＆＃39;和＆＃39;文字＆＃39;阻止＆＃39; 9＆＃39;柱。然后，我将pull-left和pull-right类应用于相关容器。

由于缺少div标记，我还修改了一些HTML。我还删除了一些文本，使代码对我更具可读性！

如何在助推器中定位侧边栏？

1 个答案: