html - 如何使用 Bootstrap 在 Logo 和菜单项之间添加一些文本？

Question

我尝试了几种方法，但不是很成功。以下是部分代码。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo.svg">Demo</a>
    </div>
    <div class="collapse navbar-collapse" id="my-navbar">
      <ul class="nav navbar-nav navbar-right">

基本上，我在左侧有 Logo ，在右侧有几个菜单项。 Logo 和菜单之间有一些空间，我想在其中插入一些文本。文本应与 Logo 和菜单沿同一水平线对齐。到目前为止，我还没有找到令人满意的方法。

Answer 1

您没有提到某些文本在小屏幕上的位置。我假设您希望文本位于 #my-navbar 的顶部。

我的方法是创建另一个 .navbar-collapse 来包含文本，并将 navbar-toggler 更改为目标 .navbar-collapse.

HTML 结构(Bootstrap 4.1)

<nav class="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Demo</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse">
            <div class="navbar-text">
                Navbar text
            </div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active"></li>
                <li class="nav-item"></li>
                <li class="nav-item"></li>
                ...
            </ul>
        </div>
    </div>
</nav>

在小屏幕上，由于 bootstrap 在 .navbar-collapse 上设置了 flex-basis: 100%;，所以这个结构已经完美地对齐了所有内容除了你需要在 .navbar-header 上设置 display:flex; 以便品牌在左边，切换器在右边:

.navbar-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    flex-grow: 1;
}

在大屏幕上，由于 bootstrap 设置 justify-content:space-between; 已经在 .container-fluid 上，.navbar-header，第一个包含文本的.navbar-collapse和第二个包含菜单的.navbar-collapse已经在正确的位置.您唯一需要做的就是将文本居中对齐，并将菜单居中对齐。

您可以自行创建自己的 CSS 类和样式。或者您可以只使用 bootstrap 实用程序类 justify-content-center 和 justify-content-end:

        <div class="collapse navbar-collapse justify-content-center">
            <div class="navbar-text">
                Navbar text
            </div>
        </div>
        <div class="collapse navbar-collapse justify-content-end">
            <ul class="navbar-nav">
                <li class="nav-item active"></li>
                <li class="nav-item"></li>
                <li class="nav-item"></li>
                ...
            </ul>
        </div>

fiddle : https://jsfiddle.net/aq9Laaew/175839/