使引导列停止在移动设备上中断[重复]

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

您需要更改 col 结构。 Bootstrap 4 更改了断点。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
  <div class="col-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-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-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 2

这很可能与您使用的图像的高度和宽度有关。我建议只使用最大高度和最大宽度，并允许图像缩放到屏幕尺寸。

<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="max-width:100px; max-height:100px;">
               </a>
            </div>

Answer 3

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-fluid 类而不是 img 元素的内联 css 样式以使其具有响应性。

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

---

您可能知道，移动设备的宽度小于414px。但是a 标签的宽度之和大于414px。因此，您应该使用 max-width 来设置它们的最大宽度并同时使用 width: 100% 或 w-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