为什么我的bootstrap导航栏不在内嵌位置？ [英] Why is my bootstrap navbar not displaing inline?

问题描述

 < nav class =navbar这是我使用bootstrap的HTML（我确定bootstrap安装正确）导航栏逆> 
< div class =container-fluid> 
 
< div class =navbar-header> 
< a class =navbar-brand>钢筋< / a> 
< / div> 
 
< div> 
< ul class =nav navbar-nav> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< li>< a href =＃>连结< / a>< / li> 
< / ul> 
< / div> 
< / div> 
< / nav> 
  

当它显示三个链接显示为块元素时。

这是因为在Bootstrap中，对于li的css是这样的：

 <$ c  $ c> .nav> li {
 position：relative; 
 display：block; 
} 
  

但是对于我来说，菜单似乎正确显示。请参阅片段，但只能在整页上看到。在移动设备上，它将表现得像块元素，因为屏幕没有空间显示它们内联。

编辑：更新了snippit以按要求工作（请参阅评论在这个答案下）

 
   .navbar .container-fluid> .navbar-header {float：left; margin-right：10px;}。navbar .navbar-nav {float：left; margin：5px;}。nav> li {float：left;}  
 
 < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css =stylesheet>< script src =https：// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"></script><nav class =navbar navbar-inverse> < div class =container-fluid> < div class =navbar-header> < a class =navbar-brand>钢筋< / a> < / DIV> < div style =display：inline-block;> < ul class =nav navbar-nav> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < li>< a href =＃>连结< / a> < /锂> < / UL> < / DIV> < / nav>  

Here is my html using bootstrap (I'm sure bootstrap is installed correctly)

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

        <div class="navbar-header">
            <a class="navbar-brand">Rebar</a>
        </div>

        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

When it displays the three links are being displayed as block elements.

解决方案

This is because in Bootstrap the css for li is this:

.nav>li {
  position: relative;
  display: block;
}

But for me the menu seems to appear correctly. See snippet, but only on a full page. On mobile devices it will behave like a block element since the screen doesn't have room to show them inline.

EDIT: Updated the snippit to work as requested (see comments below this answer)

.navbar .container-fluid>.navbar-header {
  float: left;
  margin-right: 10px;
}
.navbar .navbar-nav {
  float: left;
  margin: 5px;
}
.nav>li {
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand">Rebar</a>
    </div>

    <div style="display: inline-block;">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

这篇关于为什么我的bootstrap导航栏不在内嵌位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！