如何使用本地 bootstrap.min.css（4.0 版）与导航标签 class 一起使用？

Question

以下代码正常显示 bootstrap nav & nav-tabs

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script-->

<div>
  <ul class="nav nav-tabs">
    <li class="active settingshead"><a href="#first" data-toggle="tab">1</a></li>
    <li class="settingshead"><a href="#second" data-toggle="tab">2</a></li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="first">
      <div class="namedesig">
        <h4>Dr. Jane Doe</h4>
        <p>PhD in Applied Physics</p>
    </div>
  </div>
  <div class="tab-pane" id="second">
    <div class="namedesig">
      <h4>Dr. Martin</h4>
      <p>PhD in Applied Chemistry</p>
    </div>
  </div>
</div>

但我想使用 Local css/bootstrap.min.css 而不是 https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

<link rel="stylesheet" href="css/bootstrap.min.css">

结果是导航和导航标签无法正常显示。

如何使用bootstrap.min.css的本地文件让nav和nav-tabs正常显示？

Answer 1

bootstrap 无法显示导航和导航标签，因为我使用本地文件 Bootstrap 4.0 但我写的是 Bootstrap 3.0 代码。

下面的代码是Bootstrap3.0css，为什么使用在线link可以正常显示。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

Bootstrap 3.0 导航和导航标签代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div>
  <ul class="nav nav-tabs">
    <li class="active settingshead"><a href="#first" data-toggle="tab">1</a></li>
    <li class="settingshead"><a href="#second" data-toggle="tab">2</a></li>
  </ul>
</div>

我刚刚更改为 Bootstrap 4.0 nav & nav-tabs 代码，一切正常：

<link rel="stylesheet" href="css/bootstrap.min.css">
<div>
  <ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="#first" data-toggle="tab">1</a></li>
    <li class="nav-item"><a class="nav-link" href="#second" data-toggle="tab">2</a></li>
  </ul>
</div>

如何使用本地 bootstrap.min.css（4.0 版）与导航标签 class 一起使用？

How do I using local bootstrap.min.css(version 4.0) work with nav nav-tabs class?

nav