我遇到了bootstrap 3的问题。当涉及到大屏幕时,我想要彼此相邻两行。我使用了2行,因为当它涉及较小的屏幕时,它们需要在彼此之下。谈到移动设备,他们需要只有一排。但这对我的问题并不重要。
So this picture shows how it looks vs how it is supposed to look.
<div class="icons"> <!-- icons -->
<div class="row"><!-- row -->
<!--Begin van 1e rij-->
<div class="row"> <!-- row1 -->
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_kar.png"> <br>
<span class="span3-1">Onlineshop</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_card.png"> <br>
<span class="span3">Met betaalfuncties</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_chat.png"> <br>
<span class="span3">Online klantcontact</span>
</div>
</div> <!-- /row1 -->
<!--Begin van 2e rij-->
<div class="row"> <!-- row2 -->
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_koppel.png"> <br>
<span class="span3">Webshop koppelen</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_search.png"> <br>
<span class="span3">Verhoogt vindbaarheid</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_marketing.png"> <br>
<span class="span3">Internet marketing</span>
</div>
</div> <!-- /row2 -->
</div> <!-- row -->
</div> <!-- /icons -->
答案 0 :(得分:2)
您不需要有多行,您可以将它们组合在一起,当您填写空格时它会自动换行。你的标记非常接近 - 如果我理解你想要实现的目标,你应该能够删除内部行并保持标记的其余部分不变:
<div class="icons"> <!-- icons -->
<div class="row"><!-- row -->
<!--Begin van 1e rij-->
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_kar.png"> <br>
<span class="span3-1">Onlineshop</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_card.png"> <br>
<span class="span3">Met betaalfuncties</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_chat.png"> <br>
<span class="span3">Online klantcontact</span>
</div>
<!--Begin van 2e rij-->
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-2 col-lg-2 col-lg-offset-0" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_koppel.png"> <br>
<span class="span3">Webshop koppelen</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_search.png"> <br>
<span class="span3">Verhoogt vindbaarheid</span>
</div>
<div class="col-xs-8 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-0 col-lg-2" style="border: 3px solid black;background-color:grey;">
<img src="img/pakketten_images/Pakket_marketing.png"> <br>
<span class="span3">Internet marketing</span>
</div>
</div> <!-- row -->
</div>
</div>