Question

如何将容器流体导航中的列表项居中？我已经好几个小时了。我没有得到任何正常工作的东西。查看了大量网站的答案。

<nav class="navbar navbar-info navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="hidden-xs" href="#">
    <div class="logo-container">
      <div><img src="assets/img/logo-header-optimized.svg" alt="" height="52" style="margin:10px 0px 10px 0px"></div>
    </div>
    </a> <a class="visible-xs navbar-brand"><img src="assets/img/phone-logo-header-optimized.svg" alt="" height="22"></a> </div>
  <div>
    <ul class="hidden-xs nav navbar-nav navbar-right" style="margin-top:10px">
      <li>
        <button type="button" class="btn btn-inverse navbar-btn btn-raised" onclick="window.open('')"><strong> BOOK NOW </strong></button>
      </li>
    </ul>
  </div>
</div>
<div class="container-fluid">
  <div class="navbar-header">
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Introduction <i class="material-icons">&#xE313;</i></a>
        </li>
        <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Amenities <i class="material-icons">&#xE313;</i></a>
        </li>
        <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Hospitality <i class="material-icons">&#xE313;</i></a>
        </li>
        <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Information <i class="material-icons">&#xE313;</i></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

首先：div <div class="navbar-header">应该有一个“witdh：100％”。

第二：在插入div style="width: 60%; margin: 0 auto;"

之间

width: 60%取决于元素

Answer 2

我尝试了朱利安的解决方案，它降低了左边的按钮，我不认为他想要那个。我的两个解决方案是添加2种CSS样式之一第一个.navbar-header {padding: 0 300px;}这将使列表项居中，但也会随之移动图像

第二个.navbar-nav {padding: 0 300px;}这将使列表项居中，但也会使按钮更靠近中间但仍与图像位于同一行。

如果您想深入挖掘，我建议您阅读this

Bootstrap Nav容器流体中心li

2 个答案: