2016-04-26 15 views
0

divを使ってcol - * - 5を折り返したいと思っています。divでブートストラップ・カラムをラップする方法はありますか?

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

私のラッパーは、私はこの場合、div要素でoverflow: hidden;を追加しようとしたボディと高さ= 1と幅を有しているwrapps私のcols-5が、最後のCOL-1は、ラッパーは秒後に終了しません(次の行に移動していますcol-5、ページの最後に行く)。

答えて

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>

関連する問題