Bootstrap 4 - 品牌+导航栏项目

问题描述：

就这么你知道我今天对Bootstrap是全新的。我以前有过使用HTML/CSS的经验，因此我决定尝试学习新的东西，然后用Bootstrap 4直接跳到深层，跳过3（我知道4仍然是alpha）。无论如何，我有一个游戏，但似乎找不到年龄后，我的问题的答案。Bootstrap 4 - 品牌+导航栏项目

Refer to this image

我的导航栏，品牌标志是太大，导航栏和投掷的菜单项失准。我只想将这些物品垂直对齐到中间位置，使它们与徽标居中。

<nav class="navbar navbar-light bg-faded navbar-full"> 
     <a class="navbar-brand" href="#"><img src="http://www.a1solarandelectrical.com.au/wp-content/uploads/2016/02/logoMedium.png" /></a> 
     <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
     <div class="collapse navbar-toggleable-md" id="navbarResponsive"> 
      <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">About Us</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Solar Power</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">No Obligation Quote</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Contact Us</a> 
       </li> 
      </ul> 
     </div> 
    </nav>

这是我现在的代码。我尚未使用任何自定义CSS，因此其他所有内容都设置为默认值。标志大小高度为85px。

干杯的帮助:) ..

似乎没有办法使用引导预先定义的类来解决呢？所以解决方案很简单：'.navbar-NAV李一{ 的line-height：80px; }'。 – Banzay

@Banzay这种工作，但当我缩小窗口的移动版本现在搞砸了 - http://2.1m.yt/f-jGzGH.png – user3599852

答

添加以下代码添加以下CSS应该做的伎俩

@media (min-width: 992px) { 
    .navbar-nav li a { line-height: 80px; } 
} 

@media (max-width: 991px) { 
    .navbar-brand { float: none; } 
}

见http://www.bootply.com/dPkdVgNJZ5

您的先生是一个传奇！谢谢:) – user3599852

答

前</head>

<style> 
.nav > li > a{ 
    margin-top: 20px; 
} 
</style>

感谢您的答复。这没有做任何事情:( – user3599852

我有修改代码现在试试 – Lanka

*我修改了代码，现在试试 – Lanka

答

您可能已经解决了该问题，但根据http://getbootstrap.com/docs/4.0/components/navbar/

“将图像添加到.navbar品牌可能总是需要自定义样式或实用程序才能正确调整大小。下面是一些例子来证明“

<!-- Image and text --> 
<nav class="navbar navbar-light bg-light"> 
    <a class="navbar-brand" href="#"> 
     <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> 
    Bootstrap 
    </a> 
</nav>

Bootstrap 4 - 品牌+导航栏项目

相关推荐