让 Bootstrap 列不再在移动设备上崩溃

Question

我试图让 Bootstrap 行中的内容按比例缩小，而不是在移动设备上分成单列。我该怎么办呢？这是我到目前为止所拥有的一个示例：

<div class="row justify-content-center">
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
    <div class="col-xs-4" style="padding:0!important;"> 
        <a class="btn btn-light" style="width: 200px; height: 200px;>
            <h2> title </h2>
            <img src="" style="width:100px; height:100px;">
        </a>
    </div>
</div>

当我在手机上打开它时，每一列在页面上显示为一行。我希望所有三个在移动设备上位于同一行。

Answer 1

Bootstrap-4 删除了*-xs-*类的所有变体。

col-xs-在 Bootstrap 4 中已被放弃，取而代之的是col-. 因此，为了在各种设备上拥有三个等宽的列，请使用col-4或col代替col-xs-4。

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

使用p-0类而不是标签的内联填充样式a。

https://getbootstrap.com/docs/4.0/utilities/spacing/

对元素使用img-fluidclass 而不是内联 css 样式，img以使其具有响应能力。

https://getbootstrap.com/docs/4.0/content/images/#responsive-images

如您所知，移动设备的宽度小于414px。但a标签宽度之和大于414px. 因此，您应该使用 amax-width来设置它们的最大宽度并使用width: 100%orw-100也。

max-width CSS 属性设置元素的最大宽度。它可以防止 width 属性的使用值变得大于 max-width 指定的值。https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

在这种情况下，由于行恰好具有12列，因此没有必要使用justify-content-center。因此，您最好将其删除。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-4 p-0">
      <a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
        <h2> title </h2>
        <img src="http://via.placeholder.com/100" class="img-fluid">
      </a>
    </div>
    <div class="col-4 p-0">
      <a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
        <h2> title </h2>
        <img src="http://via.placeholder.com/100" class="img-fluid">
      </a>
    </div>
    <div class="col-4 p-0">
      <a class="btn btn-light" style="max-width: 200px; width:100%; height: 200px;">
        <h2> title </h2>
        <img src="http://via.placeholder.com/100" class="img-fluid">
      </a>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/djWZJj