Question

我是twitter bootstrap（tb）的新手并发现它很有趣。我在一个客户端prj的播放框架中使用TB。

是否可以使用看起来像

的结构

如果我使用data-toggle =“dropdown”，则下拉工作正常。以下是我使用的代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example tabbsable nav with Twitter Bootstrap</title> 
<meta name="description" content="Example tabable nav with Twitter Bootstrap">
<link href="@routes.Assets.at("stylesheets/bootstrap.css")" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="tab dropdown" href="#pane1">
Abonnement&nbsp;og&nbsp;bestillinger
<b class="caret"></b>
</a>
<ul class="dropdown-menu">  
<li><a href="#">Behandle abonnement</a></li>  
<li><a href="#">Vis bestillinger</a></li>  
<li><a href="#">Innportering av reserverte nummer</a></li>  
</ul>  
</li>   
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>  
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="pane1">
<p>You are watching 1.</p>
</div>
<div class="tab-pane" id="2">
<p>You are watching 2.</p>
</div>
<div class="tab-pane" id="3">
<p>You are watching 3.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="@routes.Assets.at("javascripts/jquery.js")"></script>  
<script src="@routes.Assets.at("javascripts/bootstrap-dropdown.js")"></script>  
<script src="@routes.Assets.at("javascripts/application.js")"></script> 
<script src="@routes.Assets.at("javascripts/bootstrap-tab.js")"></script> 
</body>
</html>

我的要求是当我点击Abonnement og bestillinger，pane1内容时 - 你正在看1应该显示。

提前致谢

Answer 1

你可以尝试这样的事情......

<ul class="nav nav-tabs">
<li class="dropdown">
  <a class="pull-right" data-toggle="dropdown"><span class="caret"></span></a><a class="pull-left" data-toggle="tab" href="#pane1">Abonnement&nbsp;og&nbsp;bestillinger</a>
  <ul class="dropdown-menu">  
  <li><a href="#">Behandle abonnement</a></li>  
  <li><a href="#">Vis bestillinger</a></li>  
  <li><a href="#">Innportering av reserverte nummer</a></li>  
  </ul>  
</li>   
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>  
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>

但是，存在格式/间距问题。您可能需要自定义CSS样式。

Demo on Bootply

Twitter Bootstrap data-toggle =“tab dropdown”无法正常工作

1 个答案: