Bootstrap 如何在同一行中制作导航栏 <li> 元素？答案

【问题标题】：Boostrap how to make navbar <li> elements in same line?Bootstrap 如何在同一行中制作导航栏 <li> 元素？
【发布时间】：2018-04-07 08:50:38
【问题描述】：

我试图让导航栏元素出现在同一行。我尝试将 .nav 类显示覆盖为内联：块。但它根本不起作用。请帮我解决这个问题。这适用于引导程序 3

HTML

<head>
  <title>Samrat Luitel website design </title>
</head>
<body>
  <!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav">
  <div class="container-fluid topnav">
    <div class="navbar-header">
      <a class="navbar-brand topnav" href="#" target="_blank">Samrat Luitel</a>
    </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#home" style="color:black">Home</a></li>
        <li><a href="#home" style="color:black">Home</a></li>
        <li><a href="#home" style="color:black">Home</a></li>
      </ul>   
      </div>
    </div>
  </div>

  </nav> 
</body>

CSS

body{
  font-family:"Lato";
  font-weight:700;
}
.navbar-brand{
  color:black;
}
.nav {
    display: inline-block;
}

【问题讨论】：

我认为你应该给 !important 如果你是压倒一切的
能分享一下jsfiddle代码吗
您只需要水平导航。 Checkout This

标签： html css twitter-bootstrap

【解决方案1】：

请在您的 li 中添加 inline-block 样式，以便您管理列表项。

.nav li{
   display:inline-block;
}

【讨论】：

很抱歉，您的代码无法解决问题。三个“家”垂直而来。不是水平的。但是如果我使用boostrap 3，它们会水平显示。请尝试再次回答。我很抱歉对问题的错误解释。

【解决方案2】：

你需要把这个css .nav > li {display: inline}

【讨论】：

我认为你的html结构在nav里面有问题你把<div class="contianer-fluid">放在了<div class="contianer-fluid">
那我该怎么办。这是一个问题吗
很抱歉，但这并不能解决问题。三个“家”垂直而来。不是水平的。但是如果我使用boostrap 3，它们会水平显示。请尝试再次回答。我很抱歉对问题的错误解释。

【解决方案3】：

很难理解确切的问题，但我猜如果内联不起作用，请尝试浮动

.nav > li {float:left:width:30%;}

/* 新编辑 */ 试试这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
     
    
    </ul>
  </div>
</nav>

【讨论】：

很抱歉，您的代码无法解决问题。三个“家”垂直而来。不是水平的。但是如果我使用boostrap 3，它们会水平显示。请尝试再次回答。很抱歉对问题的错误解释。
试试我用过的新的 bootstrap v4

【解决方案4】：

使用以下 css 更新您的 css。 Remove display:inline-block; 来自.nav css 规则。

.nav {
    float: left;
    width: 100%;
}
.nav li {
    display: inline-block;
    padding: 0 10px;
}

【讨论】：

很抱歉，您的代码无法解决问题。三个“家”垂直而来。不是水平的。但是如果我使用boostrap 3，它们会水平显示。请尝试再次回答。我很抱歉对问题的错误解释。

【解决方案5】：

你可以用这个

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css" />

<head>
  <title>Samrat Luitel website design </title>
</head>
<body>
  <!-- Navigation -->
<nav class="navbar navbar-fixed-top">
    <div class="container topnav">
      <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="#">Samrat Luitel</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Home</a></li>
        </ul>
      </div>
    </div>
  </nav>
</body>

【讨论】：

谢谢，但有任何文档链接。我没看懂这段代码
我只使用引导程序 css 服务器端链接来执行 html 根据您的要求，您可以使用本地引导程序 css 文件。
很抱歉，您的代码无法解决问题。三个“家”垂直而来。不是水平的。但是如果我使用boostrap 3，它们会水平显示。请尝试再次回答。我很抱歉对问题的错误解释。
您使用的是哪个引导程序版本？
4.我应该切换到 3，因为我认为它仍处于测试阶段。或者有解决办法

【解决方案6】：

我遇到了同样的问题，建议的解决方案在我的 stlyes.css 文件中添加“... display: inline ...”之类的内容也对我没有帮助（我也使用 Bootstrap4）。

这就是最终帮助我的原因

<nav class="navbar navbar-default navbar-expand-sm">
...
</nav>

这里的重点是navbar-expand-sm。这表示只有当屏幕尺寸小于或等于 small 时，nav-bar-items 才会垂直堆叠。在此处查看更多说明https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

【讨论】：

【解决方案7】：

li {
    float:left;
}
ul {
    list-style-type:none;
}

【讨论】：