twitter-bootstrap Bootstrap 导航栏中的左徽标和居中标题

Left logo AND Centered title in Bootstrap navbar

提问by Dev

Using the code from this SO Answer, I am trying to combine example 6 and 8 where I have a LOGO (Example 6) AND a Title/Brand (Example 8), which are always visible even in mobile screen (similar to example 8).

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

I have made minor changes, but I am not sure how to combine them.

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

Modified Bootply containing only example 6 and 8: Bootply

修改后的 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>

回答by hcgriggs

I think I understand what you're asking. You could use the class navbar-text and include it in navbar-header. Here's a Fiddle.It still displays the text in mobile.

我想我明白你在问什么。您可以使用类 navbar-text 并将其包含在 navbar-header 中。这是一个小提琴。它仍然在移动设备中显示文本。

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

EDIT: Then you need to configure the CSS like this:

编辑：然后你需要像这样配置 CSS：

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

Here's an updated Fiddle. You can adjust the height of the .navbar-text using padding or line-height.

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