Question

当分辨率很小时，我想在列中创建3个图像。使用col-md-4时，它将成为一行。如何使用一个列事件使屏幕分辨率变小。

<div class="container" style="padding-top:50px">


<div class="col col-md-4" >
  <a href="gasoline.aspx"><img src="https://s3.amazonaws.com/media.eremedia.com/uploads/2015/05/stackoverflow.png"  width="200px" height="120px" class="center-block img-fluid" /></a>
  <p class="text-center" style="    text-transform: capitalize;
font-size: .85em;
font-weight: 600;
line-height: 1.5em;
color: #212121;
text-decoration: none;">A PRODUCTS</p>
</div>

<div class=" col col-md-4">
  <a href="diesel.aspx"><img src="https://s3.amazonaws.com/media.eremedia.com/uploads/2015/05/stackoverflow.png" width="200px" height="120px" class="center-block img-fluid" /></a>
  <p class="text-center" style="    text-transform: capitalize;
font-size: .85em;
font-weight: 600;
line-height: 1.5em;
color: #212121;
text-decoration: none;">B PRODUCTS</p>
</div>

<div class="col-md-auto col-md-4">
  <img src="https://s3.amazonaws.com/media.eremedia.com/uploads/2015/05/stackoverflow.png" width="200px" height="120px" data-modal="#modal-youtube" class="center-block img-fluid" style="cursor: pointer; " />
  <p class="text-center" style="    text-transform: capitalize;
font-size: .85em;
font-weight: 600;
line-height: 1.5em;
color: #212121;
text-decoration: none;">COPORATE VIDEO</p>
</div>

以下是示例代码 enter link description here

Answer 1

首先，您应该正确使用Bootstrap grid system：

行必须放在.container;
列应放在.row（在您的情况下）中，并且只有列可能是行的直接子项。

如果要根据屏幕大小获得不同的列宽，只需为列使用其他网格类：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-xs-12">...</div>
        <div class="col-md-4 col-xs-12">...</div>
        <div class="col-md-4 col-xs-12">...</div>
    </div>
</div>

结果每列将在小型和超小型设备上填充整行宽度，在其他情况下填充行宽度的1/3。

注意：当您使用Bootstrap 3.3.7时，自4.0版以来在Bootstrap中定义了.col和.col-md-auto类。

bootstrap在列中对齐3个图像

1 个答案: