Question

开始学习Bootstrap 4及其响应式网格系统，下面的代码显示了我的基本容器类。

<div class="container">
  <div class="row">
      <div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
      <div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
      <div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
  </div>
  <div class="row">
    <div class="hidden-sm-up col-12 box4">4</div>
  </div>
</div>

第一行工作得很好，但是我试图在xs屏幕上显示我的第二行。试着查看Bootstrap的网页，看看我的错误在哪里。

Answer 1

使用d-block d-sm-none bootstrap4.beta类。它将显示sm断点

下面的元素

Stack Snippet

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-8 col-md-12 col-lg-4 box1">1</div>
        <div class="col-12 col-sm-2 col-md-6 col-lg-4 box2">2</div>
        <div class="col-12 col-sm-2 col-md-6 col-lg-4 box3">3</div>
    </div>
    <div class="row">
        <div class="d-block d-sm-none col-12 box4">4</div>
    </div>
</div>

Reference Link

Bootstrap 4可见性问题

1 个答案: