无法将引导容器彼此对齐

时间:2017-03-20 21:15:00

标签: html css twitter-bootstrap

我希望他们彼此相邻漂浮。我不明白为什么他们不会。我已经尝试了一切,包括尝试将利润率降低到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;
}

以下是结果:

enter image description here

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

只需在父列中创建另一行,然后在该行中添加3列(每行4个)

&#13;
&#13;
http://www.example.de/de/product1 
&#13;
&#13;
&#13;