Question

我有一个带有navbar-brand文本的Bootstrap导航栏。

我希望将导航栏品牌放在两行文字中，并且两者都是垂直居中的，但我只能实现垂直居中的第一行，而不是两者......

下面是小提琴

<header>
    <nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
        <div class='container-fluid'>
            <div class='navbar-header'>
                <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#collapse'>
                    <span class='sr-only'>Toogle navigation</span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
             </div>
             <div class='navbar-brand'><span class='navbar-title'>Title<br>This is the subtitle</span>
             </div>
            <div class='collapse navbar-collapse' id='collapse'>
                    <ul class='nav navbar-nav navbar-right'>
                    <li><a href='#featured'>Example 1</a></li>
                    <li><a href='#bla'>Example 2</a></li>
                    <li><a href='#blabla'>Example 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Answer 1

在给定配置上实现所需效果的简短方法是使用这样的css转换：

.navbar-brand {
  -ms-transform: translateY(-35px);
  -o-transform: translateY(-35px);
  -moz-transform: translateY(-35px);
  -webkit-transform: translateY(-35px);
  transform: translateY(-35px);
}
@media (min-width: 768px) {
  header .navbar-default {
    padding: 20px;
  }
  .navbar-brand {
    -ms-transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -webkit-transform: translateY(-7px);
    transform: translateY(-7px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header>
  <nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
    <div class='container-fluid'>
      <div class='navbar-header'>
        <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#collapse'> <span class='sr-only'>Toogle navigation</span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>

      </div>
      <div class='navbar-brand'><span class='navbar-title'>Title<br>This is the subtitle</span>

      </div>
      <div class='collapse navbar-collapse' id='collapse'>
        <ul class='nav navbar-nav navbar-right'>
          <li><a href='#featured'>Home</a>

          </li>
          <li><a href='#download'>Download</a>

          </li>
          <li><a href='#order'>Order</a>

          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

如果您还需要其他东西，请发表评论如果有帮助，请+1。

Navbar品牌，带有两行文字，垂直居中

1 个答案: