如何在容器内创建左右侧？

Question

我所拥有的是侧边栏，而右侧则有内容。我想要的是双方都在容器中，但都是全宽的。这是我的演示：https://jsfiddle.net/DTcHh/19067/

所以我希望左边的背景颜色从页面的边缘开始，但内部的文本在容器中，我也希望正确内容的背景颜色到页面的末尾，但文本在容器中。有什么建议吗？

<div class="container">
  <div class="col-md-3">
  <div class="left_sidebar">
   menu
  </div>

  </div>
  <div class="col-md-9">
  <div class="right-content">
  content
  </div>

  </div>
</div>

Answer 1

简单，将彩色容器包裹在container类之上，并使用两个不同的容器：

<div class="left_sidebar">
    <div class="container">
        <div class="col-md-3">
           menu
        </div>
    </div>
</div>
<div class="right-content">
    <div class="container">
       <div class="col-md-9">
          content
      </div>
    </div>
</div>

这是一个有效的Fiddle

删除了其他编辑，因为编辑3应该做得最好

编辑3

在这里，现在肯定是肯定的。诀窍是使用linear gradient和自举容器上方的自定义容器完成的。

请参阅Fiddle

Answer 2

你要问的是，默认情况下是不可能的，因为.container类在不同的视口上有一个设置的宽度，并且它也被if (!/^[a-z\s]+$|^[A-Z\s]+$|\d/.test(your_string_here)) { // the string isn't uppercase only, lowercase only // and doesn't contain a digit } 水平地“居中”。

要实现您的目标，您必须遵循不同的“逻辑”。 我建议这样的事情：

margin:auto

我提出这个解决方案，以便与代码保持相同的“流程”。你也可以，只是玩填充，这更有意义。

Answer 3

在col div之前使用class row

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