我使用twitter bootstrap作为node.js UI,以下HTML是我使用Jade后得到的 我想要的是使用 jumbotroon http://getbootstrap.com/examples/jumbotron/并将选项卡 1 和 2 放在导航栏上元素名称的同一行中,并使用链接中的黑色,我已经尝试了很多方法,我在这里做错了什么?
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
</div>
<a class="navbar-brand" href="/#">
Node Rec
</a>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/recipes/b1">
Tab1
</a>
</li>
<li>
<a href="/recipes/b1"></a>
</li>
</ul>
<div class="container"></div>
<div class="jumbotron"></div>
<h1>
List Arrivals
</h1>
<ul>
<li>
33: LAX-Tue Dec 02 2014 16:04:41
</li>
<li>
13: MKE-Tue Dec 02 2014 16:05:48
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</nav>
这就是现在的样子...
当我将其更改为 navbar-inverse 时,我得到了相反的结果,这不是大屏幕的样子
最佳答案
这可能是一个开始。我已将大屏幕移至 <nav>
之外.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"></link>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"></button>
</div>
<a class="navbar-brand" href="/#">
Node Rec
</a>
<div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/recipes/b1">Tab1</a>
</li>
<li>
<a href="/recipes/b1">Tab2</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>
List Arrivals
</h1>
<ul>
<li>
33: LAX-Tue Dec 02 2014 16:04:41
</li>
<li>
13: MKE-Tue Dec 02 2014 16:05:48
</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
关于javascript - Bootstrap 未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27333172/