html - 在 Bootstrap 中的容器 div 旁边添加一个新列

Question

我用的是bootstrap，虽然我的布局很简单，但是有一点我做不到。

我想在容器 div 旁边添加一个新列。

我只想保持“容器”布局，并在他的左侧附加一个“类别”框。根据屏幕尺寸，现在距离太远。

这是现在的代码:

    <div class="container-fluid">
    <div class="row" style="background-color:black;">
      <div class="col-md-2" style="background-color:cyan;">Categories</div>
      <div class="container" style="background-color:orange;">Container</div>
    </div>
</div>

更新 1:

更新 2:

     <!-- Example -->
<div class="container-fluid">
<div class="row">
  <div class="col-sm-12" style="background-color:grey;">
    Level 1: .col-sm-12 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
    <div class="row" style="background-color:black;">
      <div class="col-md-2 col-md-offset-1" style="background-color:orange;">
        Level 2: .col-xs-8 .col-sm-6
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
      </div>
      <div class="container" style="background-color:red;">
        Level 2: container
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

试试这个:

<div class="container-fluid">
<div class="row">
<div class="col-md-2">left side content</div>
<div class="col-md-8">middle content</div>
<div class="col-md-2">right side content</div>
</div>
</div>

不要在 container-fluid 中添加容器，因为容器元素具有固定宽度，并且您的布局是流动的。仔细阅读 bootstrap 文档 :)