我在我的代码中写了 col-md，但我想知道如何为小型设备和大型设备编写

Question

我想知道如何为 col-sm smart phone 设备代码编写代码并且我知道我只为桌面编写，请检查我也不确定我的编码，现在只学习bootstrap，我是网格系统的新手，第一个站点在bootstrap，谁能帮助我，我一直想在实践中了解。

<div class="container">
    <div class="row">
    <div class="col-md-8">
    <h3 class="title t-left">About <span>Lotus Interior</span></h3>
    <p style="text-align:justify; line-height:22px;">Lotus Value exemplifies purity and integrity. The symbolism guides us to be committed and transparent in all our dealings and adhere to timely delivery, ontime, each time,uncompromising on business ethics.We remain firmly committed towards creating urban living spaces where people can live,</p>
    </div> 
    <div class="col-md-4" style="padding-top:25px;">
    <img src="banner/banner5.jpg" alt="worker" class="img-responsive">
    </div> 
    </div>
    </div>


    <div class="container">
    <div class="row">
    <div class="col-md-3"><img src="row/1.jpg"/></div>
    <div class="col-md-3"> <img src="row/2.jpg"/></div>
    <div class="col-md-3"><img src="row/3.jpg"/></div>
    <div class="col-md-3"> <img src="row/4.jpg"/></div>
    </div>
    </div>

输出图像enter image description here

Answer 1

对于小型设备，它是 col-sm，对于大型设备，它是 col-sm 并查看文档，它包含所有内容！！

Answer 2

这取决于您的图片有多大以及您希望并排放置多少张图片。

在移动设备上您没有太多的屏幕空间，因此在移动设备上将 4 张图像并排排成一行的方式会太宽。对于移动设备，我建议您将它们逐一列出，这样您就可以按如下方式更改代码：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-3"><img src="row/4.jpg"/></div>
    </div>
</div>

col-sm-12 建议它应该占据整个行的长度，因此对于上面的内容，在移动设备上它会在彼此下方列出每个图像。

以下是小、中、大屏幕尺寸的代码示例：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/1.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/2.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/3.jpg"/></div>
        <div class="col-sm-12 col-md-6 col-lg-3"><img src="row/4.jpg"/></div>
    </div>
</div>

在大型设备（台式机）上：4 张图片并排。
在中型设备（平板电脑）上：2 张图片并排放置，另外两张在下方。
在小型设备（移动设备）上：1 张图片，其他图片位于下方

试试下面的代码，它会根据您提供的 URL 示例创建一个响应式图像网格：

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/1.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/2.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/3.jpg"> 
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <img class="img-responsive" style="margin-top: 10px; min-width: 100%" src="row/4.jpg"> 
        </div>
    </div>
</div>

我在我的代码中写了 col-md，但我想知道如何为小型设备和大型设备编写

I have written col-md in my code, but i want to how to write for small device and large device

twitter-bootstrap

bootstrap-grid