问Boostrap如何让导航栏中的<li>元素在同一行中？
EN

Stack Overflow用户

提问于 2017-10-26 13:24:36

回答 7查看 6.9K关注 0票数 2

我正在尝试使导航栏元素出现在同一行上。我尝试重写inline：.nav的类显示。但它根本不起作用。请帮我解决这个问题。这是在bootstrap 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;
}

html

css

twitter-bootstrap

Stack Overflow用户

回答已采纳

发布于 2017-10-26 13:57:42

你可以使用这个

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

票数 3

查看全部 7 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46946398

复制

相似问题

问Boostrap如何让导航栏中的<li>元素在同一行中？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Boostrap如何让导航栏中的<li>元素在同一行中？EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Boostrap如何让导航栏中的<li>元素在同一行中？
EN