Question

我试图让导航栏元素出现在同一行。我尝试重写.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;
}

Answer 1

您可以使用此

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

Answer 2

请为您的li添加内联块样式，以便您可以管理列表项。

.nav li{
   display:inline-block;
}

Answer 3

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

Answer 4

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

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

/ *新编辑* / 试试这个吧

＆＃13;

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

＆＃13;

Answer 5

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

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

Answer 6

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

这终于帮助了我

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

这里的重点是navbar-expand-sm。这表示导航栏项目仅在屏幕尺寸小于或等于小时垂直堆叠。在此处https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

中查看更多说明。

Answer 7

 DT <- data.table(induse = c("C29", "P7","TOTAL"), values = c(570,100,600))
 DT2 <- data.table(induse = c("C29", "P7","TOTAL","Qout"), values =c(570,100,600,30))

Boostrap如何在同一行中创建navbar <li>元素？

7 个答案: