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

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

Answer 1

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

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

HTML结构（引导程序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在flex-basis: 100%;上设置了.navbar-collapse，除了需要在display:flex;上设置.navbar-header之外品牌位于左侧，切换开关位于右侧：

.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和第二个{{ 1}}包含菜单已经在正确的位置。您唯一需要做的就是将文本居中对齐，然后将菜单右对齐。

您可以自己创建自己的CSS类和样式。或者，您可能只使用.navbar-collapse实用程序类bootstrap和justify-content-center：

justify-content-end

小提琴： https://jsfiddle.net/aq9Laaew/175839/

如何使用引导程序在徽标和菜单项之间添加一些文本？

1 个答案:

HTML结构（引导程序4.1）