引导列延伸到容器的外侧答案

【问题标题】：Bootstrap column to extend out side of the container引导列延伸到容器的外侧
【发布时间】：2015-02-20 18:04:58
【问题描述】：

我正在尝试将引导程序用于站点，但我想要实现的是必须在行 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>

http://jsfiddle.net/8fyjtn09/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我想我想通了，而不是使用普通容器，我将不得不使用我之前所说的容器流体，但只是一个偏移量

<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>

【讨论】：

这不会保持您的标准容器对齐方式吗？

【解决方案2】：

你知道 CSS 中的 flex-box 布局吗？

据我了解您的问题，我相信在更宽的屏幕上，您希望固定第一列，而第二列应该是响应式的。对于较小的屏幕，您需要默认的引导行为。如果这是您正在寻找的东西，我已经创建了一个简单的小提琴。请检查一下，如果这有帮助，请告诉我。

这是链接：https://jsfiddle.net/YameenYasin/7zaxx06z/23/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
  <div class="row flexbox">
    <div class="first">

    </div>
    <div class="second">

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

.flexbox {
    display: -webkit-flex;
    -webkit-flex-flow: row; // Children elements will be in rows
    -webkit-flex-wrap: wrap;
    width: 100%;
}
.first
{
    border:1px solid red;    
    height:50px;
    width:200px;
}
.second{
    border:1px solid green;
    width:100%;  
    -webkit-flex: 1;
    height:50px;
}
@media (max-width: 767px) {    
    .flexbox {    
        -webkit-flex-flow: column;    
    }
    .first,.second{
        width:100%;
    }    

}

【讨论】：