导航栏不显示

Question

为什么以下navbar中没有snippet？我缺少的东西？如果是，那该怎么办？

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想要如下图片：

颜色已更改！

Answer 1

您错过了.navbar-default，添加它会显示导航栏。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

更新

另外，对于您的信息，<center>

已弃用text-align: center标记

  

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。避免使用它并尽可能更新现有代码;请参阅本页底部的兼容性表，以指导您的决定。请注意，此功能可能随时停止工作。

您可以使用<center>或者在您的情况下使用引导程序，如果您想要与.text-center具有相同的效果，则可以将类 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="navbar navbar-default navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid text-center"> <button class="btn btn-large btn-success" onClick="window.print()">Print</button> </div> </div> </div> </div>添加到父元素。

＆＃13;

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕大小。

使用<nav class="navbar navbar-default">

创建标准导航栏

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;