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

使用Bootstrap网格。由于您需要3列，请使用跨越12列中的4列的col-sm-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个）

＆＃13;

http://www.example.de/de/product1

＆＃13;

无法将引导容器彼此对齐

2 个答案: