Bootstrap居中整个导航栏

因此，我在Google上搜索并试图在过去一小时内解决此问题，并且我开始稍微感到不适。Bootstrap居中整个导航栏

我需要这个导航栏（目前拥有它的全部内容向左）：（油漆制造，笑）navbar left

拥有的所有内容集中到这个样子：navbar center edit

我发现的唯一解决方案是让导航链接以品牌或品牌为中心，没有导航链接。

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-header "> 
     <a class="navbar-brand" href="#">SOUND HAUS</a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="/articles" style="color:#fff;">ARTICLES</a></li> 
      <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
      <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
      <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
     </ul> 
    </div> 
</nav>

CSS：

.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

.navbar-nav { 
    margin-top: 20px; 
    font-size: 20px; 
}

提前感谢！

来源

2016-10-22 Daniel Glynn Goodwin

你可以包含该HTML引导程序的CSS src文件 – repzero

@repzero我不知道我明白你在问什么。抱歉。 –

您的示例代码并不完全反映您的屏幕截图中的内容..将这个问题中的所有代码粘贴到jsfiddle中...查看屏幕截图和代码之间的区别？....我认为您的html页面包含链接标签到外部CSS文件引导 – repzero

你应该在容器中放置一个容器，然后覆盖并添加一些CSS规则到引导规则。

<style> 
.container.nav{ 
    text-align:center 
} 
.navbar { 
    font-family: Long Shot; 
    background-color: black; 
    z-index: 998; 
} 

@media (min-width: 768px){ 
.navbar-header{ 
    max-width: 400px; 
    display: inline-block; 
} 

.navbar-header { 
    float: none; 
    } 

} 

@media (min-width: 768px){ 
.navbar-collapse.collapse{ 
    max-width: 600px; 
    display: inline-block; 
} 

.navbar-collapse.collapse { 
    display: inline-block !important; 
    } 
} 


.navbar-brand { 
    font-size: 50px; 
    margin-top: 20px; 
    color: white !important; 
} 

</style> 


<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container nav"> 
     <div class="navbar-header "> 
      <a class="navbar-brand" href="#">SOUND HAUS</a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/articles" style="color:#fff;">ARTICLES</a></li> 
       <li><a href="/interviews" style="color:#c00618;">INTERVIEWS</a></li> 
       <li><a href="/gallery" style="color:#fff;">GALLERY</a></li> 
       <li><a href="/contact" style="color:#c00618;">CONTACT</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav>

我只加了div class="container nav" 然后一些CSS规则必须修改为尺寸大于768px（如果大致相同的保持）更大。这是我做的一个截图：

来源

2016-10-22 02:09:40 Nensi601

我可以吻你。非常感谢！ –

不客气：D – Nensi601

Bootstrap居中整个导航栏

回答

相关问题