如何制作自定义引导网格

Question

我需要为我的图像部分制作一个引导网格。但是我不知道如何做到这一点，因为我是 Web 开发的新手。 有人可以帮我实现以下网格吗？

在大屏幕上我想显示 6 列，但在移动设备上我想连续显示 2 列。

到目前为止，我已经尝试了以下代码，但没有成功。它确实将大屏幕列设置为 6，但在移动设备上它只显示 1 列。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-sm-8">
    <div class="row" id="pwd-container1">
        <div class="col-sm-12">
             <div class="form-group">
                  <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
</div>

是的，这不是图像显示部分，而是它的形式，但是一旦我弄清楚布局，我将使用该结构来显示我的图像。

非常感谢任何帮助。谢谢

Answer 1

您可以使用col-6 作为所有设备大小的默认列大小。使用col-md-2，您可以设置中等及以上设备尺寸的列宽，以便在一行中显示 6 列。

参见以下示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <!-- width < 768px 2 column / width >= 768px 6 columns -->
    <div class="col-6 col-md-2">column1</div>
    <div class="col-6 col-md-2">column2</div>
    <div class="col-6 col-md-2">column3</div>
    <div class="col-6 col-md-2">column4</div>
    <div class="col-6 col-md-2">column5</div>
    <div class="col-6 col-md-2">column6</div>
  </div>
</div>

您在移动设备上只看到一列，因为您只在小型设备及以上设备上指定了这些列。移动设备可以比小型设备更小（col-xs-* 或col-*）。

注意：您不需要为每个尺寸设置col-* 类。您只能设置列数应更改的col-* 类。如果需要，我建议设置默认值 (col-*) 并覆盖较大的尺寸 (col-sm-*、col-md-*、col-lg-*、col-xl-*)。

您可以在Bootstrap documentation 上找到有关不同尺寸的更多信息。

Answer 2

在引导程序中，您可以使用以下媒体查询

• col-sm-：适用于智能手机等小型设备
• col-md-：适用于中型设备，例如平板电脑
• col-lg-：适用于桌面大小的屏幕
• col-xl-：适用于比普通桌面更大的屏幕

由于引导程序在 1 行中使用 12 列，并且您希望在桌面上使用 6 列，在移动设备上使用 2 列，因此您可以执行以下操作

col-2 col-sm-6

12/2 = 6 所以桌面有 6 列 12/6 = 2 所以移动设备有 2 列

Answer 3

Bootstrap 4 网格系统有五个类

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

引导网格系统最多可以有 12 列。

所以如果你想要一行三列，你可以写

.col-sm-4 or col-md-4 etc.

取决于您的屏幕尺寸或您希望在一行中有多少列。

所以你应该写

            <div class="col-6 col-sm-6 col-md-4 col-lg-2">
                <div class="row" id="pwd-container1">
                        <div class="col-sm-12">
                             <div class="form-group">
                                  <label for="sc_name">City name</label>
                                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                                </div>
                            </div>
                        </div>
                    </div>