Html 引导导航栏显示不正确_Html_Css_Twitter Bootstrap

Html 引导导航栏显示不正确

html css twitter-bootstrap

Html 引导导航栏显示不正确,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正在尝试制作一个导航栏，如图所示：我的代码如下： <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'> <

我正在尝试制作一个导航栏，如图所示：

我的代码如下：

    <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 %>





飞溅

但我得到的是这样的东西：

任何关于我完全搞砸了什么的想法通常当我在文档中看到一个引导组件，并且我想复制它时，我只需在Chrome中执行

CTRL+U

（或者在浏览器中查看源代码的任何快捷方式），复制代码并将其粘贴到我最喜欢的编辑器中，然后我就拥有了该组件。在您的情况下，加价将是：

<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

元素被包装在一个

容器

元素中，这是您真正不想做的事情。我宁愿离开

nav

作为

body

的直接孩子

您在头脑中为v3代码引用了

Bootstrap v2样式表

，然后必须清除HTML标记

使用

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

添加到以下任何元素以使其透明。因此，添加以下工作

<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>

将使导航栏完全透明：）

它位于头部。我只是在玩的时候勉强移动了一下，请不要只是发布链接，因为如果链接损坏，答案可能会失效

<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>