Question

我正在尝试使用BOOTSTRAP 4 navbar，并且在网页上看到以下输出。

我真正想要的是以下内容：

我正在使用以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>

  <nav class="navbar navbar-dark bg-dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">
          <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp CVT</h4>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
      </li>
    </ul>


    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

  </nav>
</div>

我尝试使用类list-inline内联列表项，但是没有任何效果。你能帮忙吗？谢谢。

Answer 1

在您的<nav>标记中，应该有一个navbar-expand属性，例如navbar-expand-md。来自docs：

导航栏需要使用.navbar和.navbar-expand{-sm|-md|-lg|-xl}包装，以用于响应式折叠和配色方案类。

Answer 2

这些<dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-solr</artifactId> <version>4.0.0.RELEASE</version> </dependency> <dependency> <groupId>org.apache.solr</groupId> <artifactId>solr-solrj</artifactId> <version>7.4.0</version> </dependency>元素中的flex-direction是ul，因此将第二个column的{{1}}设置为row使其项目彼此相邻：

ul

ul.ml-auto {
  flex-direction: row;
}

ul.ml-auto li {
  margin-left: 30px;
}

Answer 3

存在一些问题，因为导航栏的结构不像典型的Bootstrap 4导航栏...

使用flex-row强制导航栏在所有宽度上保持水平

<div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h4 class="text-white">Collapsed content</h4>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
    <nav class="navbar navbar-dark bg-dark">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="\">
                    <h5 class="text-white">
            <i class="fab fa-expeditedssl"></i> &nbsp; CVT</h5>
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto flex-row">
            <li class="nav-item active">
                <a class="nav-link px-2" href="\">HOME
                        <i class="fas fa-home"></i>
                        <span class="sr-only">(current)</span>
                    </a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-2" href="\search">SEARCH
                        <i class="fas fa-search"></i>
                    </a>
            </li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>

https://www.codeply.com/go/zED6d4TC8B

导航栏中列表项的引人注意的放置-BOOTSTRAP 4

3 个答案: