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

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)

Bootstrap网格系统最多可以包含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>

Answer 3

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

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

由于bootstrap在一行中使用了12个列，并且您希望在台式机上使用6个列，在移动设备上使用2个列，您可以执行以下操作

col-2 col-sm-6

12/2 = 6，因此台式机需要6列 12/6 = 2所以2栏用于移动

如何制作自定义Bootstrap网格

3 个答案: