Question

我正在尝试使导航栏中的元素显示出来，问题是尽管它们是垂直的。

我尝试将代码display:inline-block添加到所有css navbar-nav选择器中，但无济于事。最后，我尝试将“ nav”选择器中的“ display：block”代码更改为display:inline-block。

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: inline-block;
}

.navbar-nav {
  margin: 7.5px -15px;
}

.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu>li>a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu>li>a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu>li>a:hover,
  .navbar-nav .open .dropdown-menu>li>a:focus {
    background-image: none;
  }
}

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

@media (min-width: 768px) {
  .navbar-left {
    float: left !important;
  }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-right~.navbar-right {
    margin-right: 0;
  }
}

<html>

<head>
  <title>This is a webpage!</title>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                    </button>
        <a class="navbar-brand topnav" href="#"></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="Login.html">Login</a>
          </li>
          <li>
            <a href="register.html">Sign Up</a>
          </li>
          <li>
            <a href="index5.html">Symptoms</a>
          </li>
          <li>
            <a href="index6.html">Insurances</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

“关于”，“登录”，“注册”，“症状”和“保险”链接应全部水平排列。但是，不管我做什么，它们只会垂直向上倾斜。

Answer 1

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li>
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          
        </li>
      </ul>
      
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Bootstrap 3也一样，正确使用类将帮助您获得所需的结果。看到这个例子

Answer 2

尝试添加以下样式：

.navbar-nav > li {
    float: left;
}

或者，您可以将display: inline-block;专门添加到li元素中：

.navbar-nav > li {
    display: inline-block;
}

Answer 3

首先，如果您使用的是Bootstrap 4，则根本不需要编写所有CSS，BS 4仅通过正确使用某些类就为您提供了很好的解决方案。

检查一下

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Logo</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
      
      
      
      <li class="nav-item">
                          <a href="#about" class="nav-link">About</a>
                      </li>
                      <li class="nav-item">
                          <a href="Login.html" class="nav-link">Login</a>
                      </li>
                      <li class="nav-item">
                          <a href="register.html" class="nav-link">Sign Up</a>
                      </li>
                      <li class="nav-item">
                          <a href="index5.html" class="nav-link">Symptoms</a>
                      </li>
                      <li class="nav-item">
                          <a href="index6.html" class="nav-link">Insurances</a>
                      </li>
    </ul>
    
  </div>
</nav>

只需正确使用这些类，就可以从here看到所有这些类选项。

如何使用bootstrap v3.3.7水平显示元素？

3 个答案: