Question

结构如下：

---------------------------------------------- 
 Logo Text                  item1 item2_1 item3
                                  item2_2
----------------------------------------------

我想要的是将徽标，文本和项目水平居中放置。 item2太长，有2个部分。我已经尝试过了，但是我听不懂。

代码如下：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#?>"><img src="Logo.png" style="height: 25px;" class="d-inline-block align-middle">Text</a>
    </div>
    <div class="navbar-collapse collapse navbar-right">
      <ul class="nav navbar-nav">

        <li><a href="#">item1</a></li>
        <li><a href="#">item2_1<br>item2_2</a></li>
        <li class="menuletra"><a href="#">item3</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

CSS

.navbar {
min-height: 70px;
padding-top: 5px;
margin-bottom: 0px;
z-index: 100;}

谢谢

Answer 1

如果要在下拉菜单中将文本水平居中，只需在prototype上设置text-align: center。如果要将徽标和文字从桌面视图的屏幕边缘移开一点，则需要向.navbar添加max-width。

这可以在下面看到：

.navbar > .container

.navbar {
  min-height: 70px;
  padding-top: 5px;
  margin-bottom: 0px;
  z-index: 100;
  text-align: center;
}

.navbar > .container {
  max-width: 50%;
}

Bootstrap Navbar水平对齐

1 个答案: