0

我想知道如何为 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>

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

4

2 回答 2

0

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

于 2018-05-11T11:57:40.303 回答
0

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

在移动设备上，您没有太多的屏幕空间，因此在移动设备上将 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>
于 2018-05-11T11:59:47.400 回答