引导程序3-2行并排
引导程序3-2行并排
提问于 2017-09-12 21:47:47
我在bootstrap 3上遇到了一个问题，我希望在大屏幕上有两行并排的屏幕。我使用了两行，因为当涉及到较小的屏幕时，它们需要在彼此的下面。当涉及到移动端时，他们需要只有1行。但这对我的问题并不重要。
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 -->回答 1
Stack Overflow用户
发布于 2017-09-13 06:30:56
你不需要有多行，你可以组合它们，当你填满空格时，它会自动换行。您的标记非常接近-如果我理解您要实现的目标，您应该能够只删除内部行，而保持标记的其余部分不变：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46178176
复制相关文章
相似问题
腾讯云开发者
