Question

我很难用bootstrap连续获得5个img-responsives类。我是新手，所以我可能会离开这里，但这就是我现在所拥有的。

HTML：

    <div class="container" id="pics" >
        <div class="row">
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/usscreenshot.png">
                    <h3> Make a real time post with your friends!</h3>


                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/mainscreenshot-01.png">
                    <h3> Discover new groups of people nearby!</h3>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/conversationsscreenshot-01.png">
                    <h3>Chat with interesting groups!</h3>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/eventscreenshot-01.png">
                    <h3>Find cool places to go!</h3>

                </div>


            </div>
             <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/eventscreenshot-01.png">
                    <h3>Find cool places to go!</h3>

                </div>


            </div>
        </div>
    </div>
</section>

我可以在一个漂亮的行中以适当的间距获得4个img，似乎我的两边都有足够的余量。我希望所有5个img成为一行，并且所有人都有回应？

就移动设备而言，我只需要所有5张图片的1列滚动，我可以使用我所拥有的工作。

感谢您的帮助。

Answer 1

您正在使用 col-md-3 ，它将分隔4个相等列中的行，最后一列将移至下一行而不是设置1列的偏移量并使每列2点像<强> COL-MD-2

<div class="container" id="pics" >
    <div class="row">
        <div class="col-md-2 col-md-offset-1 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/usscreenshot.png">
                <h3> Make a real time post with your friends!</h3>


            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/mainscreenshot-01.png">
                <h3> Discover new groups of people nearby!</h3>

            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/conversationsscreenshot-01.png">
                <h3>Chat with interesting groups!</h3>

            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/eventscreenshot-01.png">
                <h3>Find cool places to go!</h3>

            </div>


        </div>
         <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/eventscreenshot-01.png">
                <h3>Find cool places to go!</h3>

            </div>


        </div>
    </div>
</div>

Bootstrap 5 img-responsive一行

1 个答案: