Question

我不知道问题是否出在我的浏览器上，它应该能正常工作，只是我希望第一个隐藏在小屏幕上，在中型和大屏幕上可见，而第二个在屏幕上可见在小屏幕上隐藏，在大屏幕或更大屏幕上隐藏。

但是它不起作用？！是因为引导程序而出现此问题，还是我做错了。

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="col-2 d-sm-none d-md-block">
    <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
      <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
    </div>
  </div>
  <div class="col-12 d-sm-block d-md-none">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

Bootstrap的这些实用程序类的工作方式是，它们将样式应用于指定的宽度和宽度。因此，通过应用d-sm-none，您可以从sm-width到up为元素分配样式display:none。要从最小的断点开始应用此样式，应使用d-none。

因此，将您的<div class=”col-2 d-sm-none d-md-block”>更改为<div class=”col-2 d-none d-md-block”>。

另外，您可以从第二个div中删除d-sm-block，因为display:block类已经应用了col-*。

此外，对我来说，您似乎想显示相同的菜单，并根据屏幕大小来应用不同的样式。如果我错了请纠正我。

在这种情况下，我建议菜单只有一个html块，并根据屏幕大小应用样式，而不要复制内容。

将此小提琴视为近似值：https://jsfiddle.net/p8ek5ths/

Answer 2

为d-none添加此类<div class="col-2 d-sm-none d-md-block">

<div class="col-2 d-none d-md-block">
    <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
      <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
    </div>
  </div>

  <div class="col-12 d-sm-block d-md-none">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
      </li>
    </ul>
  </div>

https://jsfiddle.net/lalji1051/wp57bsgk/2/

引导程序隐藏在小屏幕上不起作用？

2 个答案: