Bootstrap 导航栏中的左侧徽标和居中标题

Posted 2023-03-06

【中文标题】Bootstrap 导航栏中的左侧徽标和居中标题

【英文标题】：Left logo AND Centered title in Bootstrap navbar

【发布时间】：2016-06-22 15:45:38

【问题描述】：

使用来自SO Answer 的代码，我尝试将示例 6 和 8 组合在一起，其中我有一个 LOGO（示例 6）和一个标题/品牌（示例 8），即使在移动屏幕中也始终可见（类似示例 8)。

我做了一些小改动，但我不知道如何组合它们。

修改后的 Bootply 仅包含示例 6 和 8：Bootply

<nav class="navbar navbar-inverse navbar-static-top example6">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
        <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 text-hide" href="">Brand Text
        </a>
    </div>
    <div id="navbar6" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
          <li><a href="#">Welcome Name</a></li>
          <li class="active"><a href="#">Logout</a></li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>

<nav class="navbar navbar-inverse navbar-static-top example-8">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar8">
        <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 text-hide" href="">Brand Text
        </a>
    </div>
    <div id="navbar8" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
          <li><a href="#">Welcome Name</a></li>
          <li class="active"><a href="#">Logout</a></li>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->
</nav>

【问题讨论】：

那么您想要的与示例 8 有何不同？

Ex 8 在中心有徽标。我想要两个，左边有一个标志，中间有一个标题（Ex 8 的标志现在在哪里）。

【参考方案1】：

我想我明白你在问什么。您可以使用类 navbar-text 并将其包含在 navbar-header 中。 Here's a Fiddle. 它仍然在手机中显示文本。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span></a>
      <p class="navbar-text">brand text here yadda yadda</p>
    </div>

编辑：那么你需要像这样配置 CSS：

.navbar-text 
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    padding-top: 10px;

这里是an updated Fiddle。您可以使用填充或行高调整 .navbar-text 的高度。

【讨论】：

感谢您的回复。我希望品牌文字居中。 JSFiddle 另外，切换开关不起作用。

我相信我已经找到了解决方案。我已经用 CSS 和 Fiddle 更新了我之前的答案。这有帮助吗？

几乎！当我将文本更改为 h3 时，它会中断。此外，除非它是移动的，否则是否可以将其居中，在这种情况下它变为 h4（或保持 h3）但与徽标对齐？ JSFiddle v2

这很糟糕，因为您将 <h3> 标签包装在 <p> 标签中。如果将<p class="navbar-text"><h3>brand text here yadda yadda</h3></p> 替换为<h3 class="navbar-text">brand text yadda yadda</h3>，它将不再中断。 fixed fiddle

如果你想让它只在大屏幕上居中，你需要使用媒体查询。当我学习如何使用它们时，我发现this guide 很有用。这实质上意味着您需要将 .navbar-text css 放在 @media 选择器中，如下所示：@media only screen and (max-width : 1200px) .navbar-text position: absolute; width: 100%; left: 0; text-align: center; margin: auto; padding-top: 10px;