Bootstrap 3 .row 与侧边栏对齐 [英] Bootstrap 3 .row alignment with Sidebar

问题描述

我有一个带有侧边栏和内容区域的全宽页面.我需要具有固定宽度值的侧边栏，内容区域宽度是页面的其余部分.正如您在 bootply 示例中看到的，第二行位于我的侧边栏下方，但不应该.

如果我将 .row:before, .row:after{display: table;} 更改为 table-cell，这个问题看起来已经解决了，但这不是一个正确的解决方案，因为它会导致一些其他问题.

http://bootply.com/89133

解决方案

将主要内容包装在它自己的部分(或 div 或内容，以哪个为准)，然后绝对定位两个主要元素.那应该工作.看一看(更新):

http://bootply.com/89155

<aside>菜单边栏</aside><部分><div class="row"><div class="col-sm-12">全宽框</div>
<div class="row"><div class="col-sm-12">全宽框</div>

</节>

CSS:

旁边{位置:绝对；宽度:200px；高度:500px；背景:红色；向左飘浮;}部分{位置:绝对；左:200px；padding-left: 100px;右:0；}

I've a full width page with sidebar and content areas. I need sidebar with fixed width value and the content areas width is rest of the page. As you can see on bootply example the second row goes under my sidebar which should not.

If I change .row:before, .row:after{display: table;} to table-cell, this problem looks solved however this is not a proper solution because it causes some other problems.

http://bootply.com/89133

解决方案

Wrap the main content in it's own section (or div or content, whichever) and then position the two main elements absolutely. That should work. Take a look (updated):

http://bootply.com/89155

<div class="container">
<aside>MENU SIDEBAR</aside>
<section>
    <div class="row">
        <div class="col-sm-12">FULL WIDTH BOX</div>
    </div>
    <div class="row">
        <div class="col-sm-12">FULL WIDTH BOX</div>
    </div>
</section>
</div>

css:

aside{
  position: absolute;
  width: 200px; 
  height: 500px; 
  background: red; 
  float: left;
}
section{ 
  position: absolute;
  left: 200px;
  padding-left: 100px;
  right: 0; 
}

这篇关于Bootstrap 3 .row 与侧边栏对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！