我希望他们彼此相邻漂浮。我不明白为什么他们不会。我已经尝试了一切,包括尝试将利润率降低到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;
}
以下是结果:
答案 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个)
http://www.example.de/de/product1
&#13;