无法将引导容器彼此对齐

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列，因此请使用col-sm-4 ，它跨12列中的4列（12/4 = 3）。 然后，您将不需要额外的CSS来浮动.thumbnail 。

http://www.codeply.com/go/UoRlotGrut

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

Answer 2

只需在父列中创建另一行，然后在该行中添加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>