左标志和中心标题在Bootstrap导航栏 [英] Left logo AND Centered title in Bootstrap navbar

问题描述

使用此 SO answer 的代码，我试图结合示例6和8，其中我有一个LOGO（示例6）和标题/品牌（示例8），它们在移动屏幕中始终可见（类似于示例8）。

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

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

Modified Bootply containing only example 6 and 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>

推荐答案

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

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.

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

Then you need to configure the CSS like this:

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

以下是更新的小提琴。您可以使用padding或line-height调整.navbar-text的高度。

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

这篇关于左标志和中心标题在Bootstrap导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！