我如何用div来包装bootstrap cols？

Question

我想用div包裹我的col - * - 5。

<div class="row"> 
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> 
    <div class="wrapper"> 
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content1 </div> 
    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> content2 </div> 
    </div> 
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> 
</div> 

我的包装具有宽度体和高度= 1。我试图添加overflow: hidden;在这种情况下的div wrapps我COLS-5，但最后COL-1移动到下一行（第二包装后没有结束col-5，它到页面的结尾）。

Answer 1

包装应该有引导宽度类，也许col-xs-10。然后内部xs-6等？

.col-xs-1 { 
 
    border: 1px solid red; 
 
} 
 
.wrapper { 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
    background: #bada55; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div> 
 
    <div class="wrapper col-xs-10 col-sm-10 col-md-10 col-lg-10"> 
 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content1</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">content2</div> 
 
    </div> 
 
    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">col1</div> 
 
</div>