col-md-6 divを隣り合わせに取得

Question

2つのcol-md-6 divを使用しているので、隣り合わせに並べてはいけませんか？また、ディスプレイをインラインブロックに設定し、両方の幅を50％に設定しました。

https://jsfiddle.net/aw406sgm/1/

body, html { 
 
    margin: 0 auto; 
 
} 
 

 
.col-md-6 { 
 
    width: 50%; 
 
    background-color: blue; 
 
    height: 100px; 
 
    display: inline-block; 
 
}

<div class = "wrapper"> 
 
    <div class = "container"> 
 
    <div class = "row"> 
 
     <div class = "col-md-6"> 
 
     </div> 
 
    </div> 
 

 
    <div class = "row"> 
 
     <div class = "col-md-6"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

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

Answer 1

ウィンドウのサイズを変更してみて、次の2つのdiv要素が実際にお互いのすぐ隣になり、より大きな解像度にそれが表示されます。

あなたはdiv要素は、すべての画面上で隣同士になりたい場合は、COL-XS-6

を使用する必要がありますそして、あなたはそれぞれのdiv

.col-xs-6 { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 
.col-xs-6:nth-of-type(even) { 
 
    background-color: orange; 
 
}

<div class = "wrapper"> 
 
    <div class = "container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

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

の行を使用しないでください

Answer 2

各グリッドクラスの別の行を追加する必要はありません。親切に更新されたコードを確認してください。

<div class = "wrapper"> 
 
    <div class = "container"> 
 
     <div class = "row"> 
 
     <div class = "col-md-6"> 
 
     </div> 
 
     <div class = "col-md-6"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

2つのcol-md-6要素は、ブロック要素であるrow要素の子です。 2つの要素を隣り合わせに配置するには、以下を使用する必要があります。また、display:inline-blockを削除して、float:left;のインラインブロック要素には、2番目の要素が改行されてしまうことの多い不要な領域が含まれている必要があります。

body, html { 
 
    margin: 0 auto; 
 
} 
 

 
.col-md-6 { 
 
    width: 50%; 
 
    background-color: blue; 
 
    height: 100px; 
 
    float:left; 
 
}

<div class="wrapper"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-6"></div> 
 
      <div class="col-md-6"></div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 4

それは簡単なことだ、と再びミスをしないでください。すべての行は、COLUMNS（colで表される）に分割されます。

<div class = "wrapper"> 
    <div class = "container"> 
     <div class = "row"> 
     <div class = "col-md-6"> 
     </div> 
     <div class = "col-md-6"> 
     </div> 
     </div> 
    </div> 
</div> 

set height = auto;

Answer 5

2つのdivを隣り合わせにしたい場合は、2つのdivをrow.Ifに入れます。col-md-6を指定すると、992pxのCSSとcol-sm-6のCSSが使用されます。 768px

body, html { 
 
    margin: 0 auto; 
 
} 
 

 
.col-xs-6 { 
 
    border-right: 2px solid red; 
 
    background-color: blue; 
 
    height: 100px; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class = "wrapper"> 
 
    <div class = "container"> 
 
     <div class = "row"> 
 
     <div class = "col-xs-6"></div> 
 
     <div class = "col-xs-6"></div> 
 
     </div> 
 
     </div> 
 
    </div>