Question

我试图为一个网站使用bootstrap，但我想要实现的是一行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/

Answer 1

你知道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%;
    }    

}

Answer 2

我想我想出来了，而不是使用普通的容器，我将不得不使用容器液体，如前所述，但只是一个偏移

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

Bootstrap列延伸到容器的一侧

2 个答案: