Question

我一直试图解决这个问题几个小时，但我无法理解如何让我的菜单栏居中，我尝试应用不同的边距和填充，但显然不会集中在所有设备上。< / p>

以下是显示菜单栏的页面：http://newton-poppleford-weather.co.uk/index.htm

我不想粘贴脚本，因为它们很大，但请有人给我一个关于我应该在哪里寻找的提示，以及我是否应该删除我设置的任何边距？

谢谢，

威廉

Answer 1

您可以将.navbar CSS编辑为：

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

Answer 2

好的，我希望这适合你。

将此添加到您的自定义样式：

.navbar-nav {
  float: none;
 }

.navbar-toggle { 
  position: absolute; 
  float: none;
  right: 15px;
  margin-right: auto;
}    

@media screen and (min-width: 768px){
  .navbar-nav > li {
    display: inline-block; 
    float: none;
  }
}

然后通过执行以下操作修改HTML：

将hidden-sm hidden-md hidden-lg添加到navbar-header
在<li class="hidden-xs"><a href="index.htm">Newton Poppleford Weather</a></li>

navbar-collapse

所以你的HTML应该是这样的：

<div class="navbar-header hidden-sm hidden-md hidden-lg">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle&nbsp;navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.htm">Newton&nbsp;Poppleford&nbsp;Weather</a>
</div>
<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav" id="main-nav">
    <li class=""><a href="index.htm">Newton&nbsp;Poppleford&nbsp;Weather</a></li>
    <li class="active"><a href="index.htm" data-toggle="tab" data-tab-url="index.htm">Now</a></li>
       <li><a id="click-today" href="today.htm" data-toggle="tab" data-tab-url="today.htm">Today</a></li>
    <li><a id="click-yesterday" href="yesterday.htm" data-toggle="tab" data-tab-url="yesterday.htm">Yesterday</a></li>
    <li><a id="click-thismonth" href="thismonth.htm" data-toggle="tab" data-tab-url="thismonth.htm">This&nbsp;Month</a></li>
    <li><a id="click-thisyear" href="thisyear.htm" data-toggle="tab" data-tab-url="thisyear.htm">This&nbsp;Year</a></li>
    <li><a id="click-records" href="records.htm" data-toggle="tab" data-tab-url="records.htm">Records</a></li>
    <li><a id="click-trends" href="trends.htm" data-toggle="tab" data-tab-url="trends.htm">Trends</a></li>
  </ul>
</div><!--/.nav-collapse -->

Center Bootstrap菜单栏

2 个答案: