Html 引导列延伸到容器的外侧

我试图为一个站点使用引导程序，但我试图实现的是在col-sm-6行中的列。我希望其中一列位于普通容器中，另一列具有容器流体效果

因此，它将一列作为标准列，另一列作为全宽列。到目前为止，这很难做到：

<div class="container">
  <div class="row">
    <div class="col-sm-6 first">

    </div>
    <div class="col-sm-6 second">

    </div>
  </div>
</div>

---

您知道CSS中的flex box布局吗

正如我理解你的问题，我相信在更宽的屏幕上，你希望固定第一列，而第二列应该是响应性的。对于较小的屏幕，您需要默认的引导行为。如果这就是你要找的，我已经创造了一个简单的小提琴。请检查一下，并让我知道这是否有帮助

以下是链接：

.flexbox{
显示：-webkit flex；
-webkit flex flow:row；//子元素将位于行中
-webkit柔性包装：包装；
宽度：100%；
}
第一
{
边框：1px纯红；
高度：50px；
宽度：200px；
}
.第二{
边框：1px纯绿色；
宽度：100%；
-webkit-flex:1；
高度：50px；
}
@介质（最大宽度：767px）{
.flexbox{
-webkit-flex-flow：列；
}
.第一，.第二{
宽度：100%；
}    
}

我想我已经弄明白了，我必须使用容器流体，而不是像我之前所说的那样使用普通容器，但只是一个偏移量

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-offset-2 col-xs-4 first">

    </div>
    <div class="col-sm-6 second">

    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-offset-2 col-xs-4 first">

    </div>
    <div class="col-sm-6 second">

    </div>
  </div>
</div>