在使用 offset-sm 时遇到问题 (Bootstrap 4)

Question

我有 3 张卡片。我想说的是“在 xs 断点处显示 3 张卡片堆叠在一起。在 sm 断点处使每张卡片占据可用的 1/2 space（两张卡在上面，一张在下面居中就是我想要的）。最后，在 md 断点处，让每张卡占用可用 space.

的 1/3

这是我的代码 (https://codepen.io/ob98/pen/mdVqOJo):

<div class="container">
   <div class="row">
      <div class="col-xs col-sm-6 col-md-4">  <!-- One -->
         <div class="card" >
            <div class="card-body">
               <h5 class="card-title text-center">Card</h5>
            </div>
         </div>
      </div>
      <div class="col-xs col-sm-6 col-md-4"> <!-- Two -->
         <div class="card" >
            <div class="card-body">
               <h5 class="card-title text-center">Card</h5>
            </div>
         </div>
      </div> 
      <div class="col-xs col-sm-6 offset-sm-3 col-md-4">  <!-- Three. Set offset-sm-3 on this one-->
         <div class="card" >
            <div class="card-body">
               <h5 class="card-title text-center">Card</h5>
            </div>
         </div>
      </div>
   </div>
</div>

我在最后一张卡片上设置了 .offset-sm-3，因为如果这张卡片占据 6 列，我认为这会通过在每边偏移 3 列来使其居中。

如果您查看 codepen，您会看到卡片正确堆叠 (xs)，然后最初正确扩展到我的 col-sm 定义，第三张卡片位于上述两张卡片的中间。但在此之后，如果您继续使屏幕变大，它永远不会移动到 col-md-4 定义并开始看起来 funky/uncentered.

注意：如果我从最后一张卡片中删除 '.offset-sm-3'，.col-md-4 将在遇到该断点时生效。

感谢您的帮助。

Answer 1

您需要为 md 断点设置偏移量。将 offset-md-0 添加到具有 offset-sm-3.

的第三个 <div>

<!-- Add offset-md-0 -->
<div class="col-xs col-sm-6 offset-sm-3 col-md-4 offset-md-0">

在使用 offset-sm 时遇到问题 (Bootstrap 4)

Having trouble with offset-sm (Bootstrap 4)

twitter-bootstrap

bootstrap-4

bootstrap-grid