css - 为什么导航链接中的文本没有出现？

Question

我正在使用 Bootstrap 选项卡，但导航链接中的文本没有出现。你知道为什么吗？

示例:https://jsfiddle.net/o1w0m4os/

HTML:

<ul class="nav nav-pills bg-light-gray" role="tablist">
    <li class="">
        <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
            <span class="d-none d-lg-inline-block">tab 1</span>
        </a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
            <span class="d-none d-lg-inline-block">tab 2</span>
        </a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#tab3" data-toggle="tab" role="tab">
            <span class="d-none d-lg-inline-block"> tab 3</span>
        </a>
    </li>
</ul>

Answer 1

你把这个类 d-none 放在 css display: none!important;
所以删除 d-none

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav nav-pills bg-light-gray" role="tablist">
    <li class="">
        <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab">
            <span class="d-lg-inline-block">tab 1</span>
        </a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#tab2" data-toggle="tab" role="tab">
            <span class="d-lg-inline-block">tab 2</span>
        </a>
    </li>
    <li class="disabled">
        <a class="nav-link" href="#tab3" name="myCongresses" data-toggle="tab" role="tab">
            <span class="d-lg-inline-block"> tab 3</span>
        </a>
    </li>
</ul>