如何仅在移动设备上显示 Bootstrap 5 列？

Question

我在第二列上有一个 sortable table，拖动效果不佳，因此想在要拖动的列之前创建一些 space。如何让第一列只显示在移动设备上？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-1 d-lg-none">
    Show only on mobile devices
  </div>
  <div class="col-sm-11 d-block">
    Show on all devices
  </div>
</div>

Answer 1

我想这就是你要找的 (col-sm-1 d-block d-sm-none):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-1 d-block d-sm-none">
    Show only on mobile devices
  </div>
  <div class="col-sm-11 d-block">
    Show on all devices
  </div>
</div>

如何仅在移动设备上显示 Bootstrap 5 列？

How can I show a Bootstrap 5 column only on mobile?

twitter-bootstrap