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

Question

我想知道如何编写col-sm智能手机设备代码的代码，并且知道我只为桌面编写了代码，请检查我也不确定我的编码，现在只学习引导，我是网格系统的新手和引导程序的第一个站点，任何人都可以帮助我，我一直想知道实践经验。

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

输出图像在此处输入图像描述

Answer 1

这取决于您的图像有多大以及您希望彼此相邻多少张。

在移动设备上，您没有太多的屏幕空间，因此在移动设备上将 4 张图像并排在一行中的方式太宽了。我建议您将它们分别列在移动设备下方 1 个，以便您将代码更改如下：

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

Answer 2

对于小型设备，它是col-sm，对于大型设备，它是col-sm，并检查文档，它拥有一切！！