如何组织布局以使其响应？

Question

这是我的代码

<div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header"> Utenti online </h2>
            </div>
        </div>
        <!-- fine row1 -->

        <div class="row">
            <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
                <div class="useronline">
                    <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
                    <b style="margin:10px;"> Marco </b>
                </div>
            </div>

            <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
                <div class="useronline">
                    <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
                    <b style="margin:10px;"> Marco </b>
                </div>
            </div>
            <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
                <div class="useronline">
                    <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
                    <b style="margin:10px;"> Marco </b>
                </div>
            </div>
            <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
                <div class="useronline">
                    <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"/>
                    <b style="margin:10px;"> Marco </b>
                </div>
            </div>

            <div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
                <div class="useronline">
                    <img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
                    <b style="margin:10px;"> Marco </b>
                </div>
            </div>
        </div>
    </div>

这是窗口浏览器的图像（大屏幕）

现在，col-lg是10但是sm是25。 我的问题是：如何组织布局以使其响应所有屏幕？

Answer 1

Bootstrap在所有屏幕上都有响应，如果您要在所有屏幕尺寸上寻找一致的行为，您可以在代码中更改这些行，如下所示：

改变这个：

<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">

到这个

<div class="col-sm-2 col-lg-2 col-md-2" style="margin:10px">

将使所有设备的所有div扩展为两列。

抱歉，我没有足够的积分作为评论添加，因此添加了答案。