Question

我有侧边栏和主要内容，但是，在我的主要内容中，我想要有3行。顶行，将涵盖整个主要内容。中间行有3列等间隔跨越主要内容。底行将有2个等间距。

如果我的内容布局是

<div class="container-fluid">
  <div class="row">
     <div class="col-md-1 sidebar">  
     </div>
     <div class="col-md-11 main-content">  
     </div>
  </div>
</div>

我的css有超过视口100％的高度，所以在我尝试的行内容中 - 1.在主要内容中嵌套另一个.container-fluid，然后为每个顶部，中间和底部行做一个新行？从我的尝试来看，这不起作用我相信由于我试图将容器嵌套在另一个容器中。如果我错了，你可以将容器嵌套在另一个容器内，那个容器里面.main-content有12个新列吗？或者我正在使用.main-content已经使用的11列？

我的另一个尝试是 - 2.直接连续（不嵌套在另一个.container。但是当我这样做时，我无法让行跨越整个.main-content（甚至使用class =“col-md-11”）。所以我的中间行（我希望在第一行下面的第二行）位于我的第一行的右侧。我尝试添加.main-content {display：block}以使行彼此重叠但是这样做了也不行。

我接近这个错了吗？我不应该将.sidebar和.main-content放入相同的.container-fluid中吗？

Answer 1

<div class="container-fluid">
  <div class="row">
    <div class="col-md-1 sidebar"></div>
      <div class="col-md-11 main-content">

        <div class="row">
          <div class="col-md-12"></div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
          </div>
          <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6"></div>
          </div>
        </div>
      </div>
    </div>

bootstrap列 - 页面还是容器？

1 个答案: