什么是“navbar-header”在Bootstrap中做类吗？ [英] What does "navbar-header" class do in Bootstrap?

问题描述

我在导航栏中使用了 .navbar-header Bootstrap类很久，但从未困扰过为什么。我在网上搜索了我们为什么使用它，但没有找到任何解释。有人可以解释它的用途吗？

< div class =container-fluid>
< div class =navbar-header>
< a href =＃class =navbar-brand>
网站名称
< / a>
< / div>
< / div>
< / nav>

解决方案

导航栏标题主要是Bootstrap导航栏。它在导航栏左侧分配大约150px的大小来包装导航栏品牌，并允许品牌名称或徽标在点击或悬停时使用整个区域。但navbar-header的最有用的属性是它对768px（平板视图）和之后的100％宽度的响应。这样品牌就可以集中在视口的顶部，这是一种很好的做法，它必须避免响应式菜单在打开时与您的品牌重叠。 编辑 - > navbar品牌不会对100％的宽度做出回应。

但是你说的对，在网络中，因为它本身不执行一个功能。大多数人只是把它放在一边，取而代之，或者把它作为一个钩子（父类）来定位navbar品牌或他们想要包含的任何其他元素。

I have been using .navbar-header class of Bootstrap for my navigation bars for quite a while but never bothered to wonder why. I searched online as to why we use it but didn't find any explanation. Can someone explain what is it's purpose?

<nav class="navbar navbar-inverse ">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">
        Website Name
      </a>
    </div>  
  </div>
</nav>

解决方案

The navbar-header is mostly an architectural class for Bootstrap navbar. It allocates approximately 150px to the left of the navbar to wrap the navbar-brand and allow the brand name or logo to make use of the entire area on click or hover. But the most useful property of the navbar-header is its responsiveness to 100% width on and after 768px (tablet views). This allows the brand to be centered at the top of the viewport which it is a nicety to have to avoid your responsive menu overlapping your brand when it opens. EDIT --> The navbar-brand doesn't respond to 100% width.

But you are right, little it's said about this class in the web, because it doesn't per se execute a function. Most people just either leave it alone, replace it, or use it as a hook (parent) class to target the navbar-brand or any other element they wanted to include within.

这篇关于什么是“navbar-header”在Bootstrap中做类吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！