[英]How to position sidebar in bootstrap?
I'm trying to position sidebar on the right side in a site based on Bootstrap grid. 我试图在基于Bootstrap网格的站点右侧放置侧边栏。
Well, this is very simplified layout that I've made - jsFiddle 嗯,这是我制作的非常简化的布局 - jsFiddle
I admit it's not the good use of bootstrap classes (rows etc.) but it works. 我承认它不是很好地使用bootstrap类(行等)但它的工作原理。
The problem is: the sidebar html code must be under the text and content (because of SEO), so it must be somehow positioned next to content (class .content ). 问题是: 侧边栏html代码必须在文本和内容下 (因为SEO),所以它必须以某种方式放置在内容 (类.content ) 旁边 。
I tried positioned it as an relative element but didn't have any luck. 我尝试将它定位为相对元素,但没有任何运气。
Is this more what you were after? 这更像是你追求的吗?
<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>
Basically I've split your entire container 3 to 9, and then made your 'content' and 'text' blocks children of the '9' column. 基本上我将你的整个容器3分为9,然后让你的'内容'和'文本'阻止'9'列的孩子。 I then applied both the pull-left
and pull-right
class to the relevant containers. 然后我将pull-left
和pull-right
类应用于相关容器。
I also fixed up your HTML a bit as it was missing a div
tag. 我还修改了你的HTML,因为它缺少一个div
标签。 I also got rid of some of the text to make the code more readable to me! 我也摆脱了一些文本,使代码对我更具可读性!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.