Question

<body>
  <!-- jQuery first, then Bootstrap JS. -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Products</a>
      <ul class="dropdown-menu">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
      </ul>

    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>

这是正文部分的代码..你能帮我弄清楚什么是错的吗？我无法在水平标签中看到内容：（

Answer 1

在使用v3 CSS文件之前，您正在混合使用v4标记。 它们不可互换所以这是一个问题。

您还需要将data-toggle="tab"应用于每个a代码，无论您使用的是哪个版本。根据您实际使用的版本，查看li结构的文档。

v3＆amp;的工作示例V4

Bootstrap v3示例：请参阅标签Markup＆amp; Nav Tabs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Products</a>
    <ul class="dropdown-menu">
      <li><a href="#one" role="tab" data-toggle="tab">One</a>
      </li>
      <li><a href="#two" role="tab" data-toggle="tab">Two</a>
      </li>
      <li><a href="#three" role="tab" data-toggle="tab">Three</a>
      </li>
    </ul>
  </li>
  <li role="presentation"><a href="#contact" role="tab" data-toggle="tab">Contact</a>
  </li>
</ul>

<div class="container-fluid">
  <div class="tab-content">
    <div id="home" role="tabpanel" class="tab-pane fade in active">
      <div class="alert alert-info">Home</div>
    </div>
    <div id="one" role="tabpanel" class="tab-pane fade">
      <div class="alert alert-info">One</div>
    </div>
    <div id="two" role="tabpanel" class="tab-pane fade">
      <div class="alert alert-info">Two</div>
    </div>
    <div id="three" role="tabpanel" class="tab-pane fade">
      <div class="alert alert-info">Three</div>
    </div>
    <div id="contact" role="tabpanel" class="tab-pane fade">
      <div class="alert alert-info">Contact</div>
    </div>
  </div>
</div>
<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.min.js"></script>

Bootstrap v4示例：请参阅Navs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" data-toggle="tab" href="#one">One</a>
      <a class="dropdown-item" data-toggle="tab" href="#two">Two</a>
      <a class="dropdown-item" data-toggle="tab" href="#three">Three</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#contact">Contact</a>
  </li>
</ul>

<div class="container-fluid">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home">
      <div class="alert alert-info">Home</div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="one">
      <div class="alert alert-info">One</div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="two">
      <div class="alert alert-info">Two</div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="three">
      <div class="alert alert-info">Three</div>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="contact">
      <div class="alert alert-info">Contact</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>

Answer 2

如果您想使用False，那么代码将是这样的。

navbar

更多信息：NavBar

如果您想使用<nav class="navbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">one</a></li> <li><a href="#">two</a></li> <li><a href="#">three</a></li> </ul> </li> <li class="active"><a href="#">Contact</a></li> </ul> </nav>，那么代码将是这样的。

Bootstrap tabs

详细信息：Bootstrap tabs

导航选项卡不与Bootstrap一起使用

2 个答案:

v3＆amp;的工作示例V4