Bootstrap：左侧 1 列中间 1 不缩放答案

【问题标题】：Bootstrap: 1 column on left 1 on the middle without scalingBootstrap：左侧 1 列中间 1 不缩放
【发布时间】：2018-01-16 10:53:27
【问题描述】：

我有这个代码：https://www.bootply.com/a0wTkTuKyG

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2" style="background-color:red">
      Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
    </div>  
    <div class="col-md-6" style="background-color:yellow">
      Content<br>Content<br>Content<br>Content<br>Content<br>
    </div>  
  </div>  
</div>

如您所见，黄色“内容”div 右侧还有一大块剩余的白色区域。我希望当我水平缩放（调整大小）窗口时首先缩小白色区域，并且只有当它过度重新缩放或破坏红色和蓝色 div 时。

我还想在侧边栏和内容之间添加一些边距，该边距也应该首先减少。

所以我希望与“容器”类的行为相同。保持内容大小直到可能，并且仅当窗口大小变得足够小时才重新调整内容大小。

我可以用引导程序来做吗？

【问题讨论】：

什么蓝色的div？你是说黄色吗？
不，不知道你在问什么。
@Naomi 谢谢，已修复

标签： css twitter-bootstrap multiple-columns

【解决方案1】：

据我所知，您可以使用 bootstrap，如果我能很好地理解您，这可能会对您有所帮助：

<div class="container-fluid">
 <div class="row">
  <div class="col-md-2 col-sm-3 col-xs-4" style="background-color:red">
   Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
  </div>  
  <div class="col-md-6 col-sm-7 col-xs-8" style="background-color:yellow">
   Content<br>Content<br>Content<br>Content<br>Content<br>
  </div>  
 </div>  
</div>

【讨论】：