2列に2列のブートストラップ付き

Question

ブートストラップグリッドをもっと学ぼうとしています。私は私のページの真ん中に2つの列で2つの列を取得しようとしています。 だから、それは次のようになります。

 

 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-6"> 
 
     <div id="text1"> 
 
     <label>Text 1</label> 
 
     </div> 
 
     <div id="text2"> 
 
     <label>Text 2</label> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-6 col-sm-6"> 
 
     <div id="text3"> 
 
     <label>Text 3</label> 
 
     </div> 
 
     <div id="text4"> 
 
     <label>Text 4</label> 
 
     </div> 
 

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

しかし、私の要素は、私はそれらをしたい場所ではありません。

ここで私はこれまで得たものです。ここで

Answer 1

はフィドルでのソリューションです：Solution 1

さて、問題の説明のために：

まずあなたが特定の列を設定する必要があります。ブートストラップのグリッドはです。最大値はです。ただし、の列をグリッド全体に塗りつぶす必要はありません。

オフセットという名前のものを使用して、要素に空白を入れることができます。 class="col-md-5 col-lg-5 col-sm-5 offset-1"クラスを持つと、値が5の列が得られますので、実際には2列を配置し、側面にスペースを入れることができます。

私は、ブートストラップのグリッドを通り、それを操作する方法についてのよく知られた感覚を得るために周りを遊ぶことをお勧めします。 スタイルシートmargin-left:25px; margin-top:25px;は、列自体の上部と側部にスペースを与えます。