Question

我遇到了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 -->

Answer 1

您不需要有多行，您可以将它们组合在一起，当您填写空格时它会自动换行。你的标记非常接近 - 如果我理解你想要实现的目标，你应该能够删除内部行并保持标记的其余部分不变：

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

请参阅codepen：https://codepen.io/kball/pen/VMwMyo?editors=1010

Bootstrap 3 - 彼此相邻的2行

1 个答案: