隣り合うブートストラップコンテナを並べ替えることができません

Question

私はそれらを互いに隣り合わせに浮かべておきます。私はなぜ彼らがしないのか分からない。私は10pxまでマージンを減らそうとするなど、すべてを試しました。何が問題なの？私は3つのコンテナを左から浮かべて並べる必要があります。ここで

<div class="row"> 
    <div class="col-sm-6 col-xs-12"> 

    <div class="thumbnail"> 
     <img src="includes/sample.png" alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
     </p> </div> </div> 




    <div class="thumbnail"> 
     <img src="includes/sample.png" alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
     </p> </div> </div> 


    <div class="thumbnail"> 
     <img src="includes/sample.png" alt="..."> 
     <div class="caption"> 
     <h3>Thumbnail label</h3> 
     <p>...</p> 
     <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
     </p> </div> </div> 

</div> 
</div> 

は私のカスタムCSS

.thumbnail { 
    float:left; 
    margin: 0px; 
} 

であり、ここでの結果である：

Answer 1

ちょうど親列内の別の行を作成し、その行の3列を追加します（各4回）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-6 col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-sm-4"> 
 
      <div class="thumbnail"> 
 
       <img src="includes/sample.png" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>...</p> 
 
       <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="thumbnail"> 
 
       <img src="includes/sample.png" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>...</p> 
 
       <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="thumbnail"> 
 
       <img src="includes/sample.png" alt="..."> 
 
       <div class="caption"> 
 
       <h3>Thumbnail label</h3> 
 
       <p>...</p> 
 
       <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
 
       </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ブートストラップグリッドを使用してください。 3列が必要なので、12列のうち4列（12/4 = 3）にまたがるcol-sm-4を使用します。次に、.thumbnailをフロートさせるために特別なCSSは必要ありません。

<div class="row"> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="thumbnail"> 
       <img src="includes/sample.png" alt="..."> 
       <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>...</p> 
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="thumbnail"> 
       <img src="includes/sample.png" alt="..."> 
       <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>...</p> 
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-sm-4 col-xs-12"> 
      <div class="thumbnail"> 
       <img src="includes/sample.png" alt="..."> 
       <div class="caption"> 
        <h3>Thumbnail label</h3> 
        <p>...</p> 
        <p><a href="#" class="btn btn-primary" role="button">Buy!</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div>