Question

我正在尝试制作像http://getbootstrap.com/examples/navbar/

一样的导航栏

我有以下代码：

    <head>
  <meta charset='UTF-8' />
  <link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
  <nav class="navbar navbar-inverse navbar-fixed-top" >
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BLARG</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">TEST</a></li>
      </ul>
    </div>
  </nav>

  <title>Splatter</title>
  <div class="page-header">
    <h1><%= @title %></h1>
  </div>
  <%= yield %>

但是我得到这样的东西： enter image description here

任何想法，我完全搞砸了

Answer 1

您在v3代码中引用了Bootstrap v2 stylesheet，然后必须清理HTML标记。

<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' />

<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">

        <a href="#" class="navbar-brand">Blarg</a>
      </div>

      <div class="navbar-collapse collapse" id="navbar">

        <ul class="nav navbar-nav">
          <li><a href="#">Test</a>
          </li>

        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </nav>


</body>

Answer 2

通常当我在文档中看到一个bootstrap组件，并且我想要复制它时，我只是在chrome中执行CTRL+U（或者在浏览器中查看源代码的任何快捷方式）并复制代码并粘贴它在我最喜欢的编辑器和BHAM中！我有那个组件。在你的情况下，标记将是，::

<div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

</div>

请注意，nav元素包含在container元素中，这是您不想做的事情。我宁愿离开nav作为body的直接孩子。

FIDDLE HERE

Answer 3

使用

<nav class="navbar bg-transparent ...">...</nav>

工作，然后与其他css类一起使用，以完全适应您想要的外观。这是一个备忘单，可以帮助您开始cheat sheet在备忘单中是一个css类列表。上面的代码完全适用于使导航栏按照您想要的方式添加css类

bg-transparent

以下任何元素使它们透明。所以添加以下作品

<nav class="navbar bg-transparent navbar-inverse navbar-fixed-top" >
    <div class="navbar-header">
      <a class="navbar-brand" href="#">BLARG</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">TEST</a></li>
      </ul>
    </div>
</nav>

将使导航栏完全透明：）

Bootstrap导航栏无法正确显示

3 个答案: