Question

我无法弄清楚我对我的代码做了什么，但不幸的是Navbar不再显示内联为Bootstrap Navbar，任何帮助都将不胜感激。

.navbar-nav>li {
  float: none;
}
.navbar-default {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: rgba(150, 155, 155, );
}
.navbar {
  margin-bottom: 0 !important;
}


.list {
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: bolder;

  
  <div class="list" style="Position: absolute; top: 0px; left:0px;">
      <div class="navbar navbar-default">
          <nav class="navbar navbar-default">
          <ul class="nav nav-justified navbar-nav">
          <h3><li><a href="/">Home</a></li></h6>
          <h3><li><a href="group.html">Team</a></li></h3>
          <h3><li><a href="services.html">Krygyzstan</a></li></h3>
          <h3><li><a href="positions.html">Blog</a></li></h3>
          <h3><li><a href="positions.html">Expeditions</a></li></h3>
              </ul>
              </div>
        </nav>
       <style>
      text-align:justify;
       </style>
      </div>

Answer 1

将h3移到a标记内，并移除navbar-justified中所有不必要的类，尤其是ul。 h3s干扰li和ul。这是在代码笔中为我工作的代码

 <div class="list" style="position: absolute; top: 0px; left:0px;">
  <div class="navbar navbar-default">

      <ul class="nav navbar-nav">
        <li><a href="/"><h3>Home</h3></a></li>
        <li><a href="group.html"><h3>Team</h3></a></li>
        <li><a href="services.html"><h3>Krygyzstan</h3></a></li>
        <li><a href="positions.html"><h3>Blog</h3></a></li>
        <li><a href="positions.html"><h3>Expeditions</h3></a></li>
          </ul>
          </div>


  </div>

Answer 2

应该设置Bootstrap 3的导航栏，以便它们具有响应性和可折叠性。您需要添加导航栏标题和折叠菜单。我假设您在这里使用bootstrap 3，所以它看起来应该如下所示：

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/"><h3>Home</h3></a></li>
            <li><a href="group.html"><h3>Team</h3></a></li>
            <li><a href="services.html"><h3>Krygyzstan</h3></a></li>
            <li><a href="positions.html"><h3>Blog</h3></a></li>
            <li><a href="positions.html"><h3>Expeditions</h3></a></li>
        </ul>
    </div>
</nav>

不确定为什么你的导航中有h3标签，但如果你真的需要它们，那么技术上的网络标准说你不应该在内联元素中有块元素，所以你的h3标签在技术上应该在a标签内部然后然后你将不得不重新设计一些东西，因为bootstraps样式不能在标签之外使用它们，所以无论你是否愿意这样做都取决于你。但是，如果你这样做，你的结构应如下所示：

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><h3><a href="/">Home</a></h3></li>
            <li><h3><a href="group.html">Team</a></h3></li>
            <li><h3><a href="services.html">Krygyzstan</a></h3></li>
            <li><h3><a href="positions.html">Blog</a></h3></li>
            <li><h3><a href="positions.html">Expeditions</a></h3></li>
        </ul>
    </div>
</nav>

然后你必须在bootstraps导航栏中重新设置h3标签和标签，使其看起来与普通的bootstrap导航栏相同。

如果您不想要可折叠导航，那么我建议您编写自己的导航和css，如下所示：

<nav>
     <div class="container">
         <div class="row">
              <div class="col-xs-12">
                 <ul>
                     <li><a href="/">Home</a></li>
                     <li><a href="group.html">Team</a></li>
                     <li><a href="services.html">Krygyzstan</li>
                     <li>a href="positions.html">Blog</a></li>
                 </ul>
              </div>
         </div>
     </div>
</nav>

然后添加自己的样式，如

nav {
  background:#000;
  display:block;
  height:100%;
}
nav ul{
  width: 100%;
  list-style-type:none;
  padding:0;
  margin:0;
}
nav ul li {
  float:left;
  display:inline-block;
}
nav ul li a{
  display:inline-block;
  padding:10px 15px;
  margin:0 10px;
  background:#777;
  color:#fff;
}

但是我放下的第一个示例应该让你的导航栏为你工作只记得使用bootstrap 3它们应该是可折叠的，所以你需要保持它们提供的结构。

为什么我的Navbar不显示内联

2 个答案: