Question

我一直试图获得完美的导航栏近12个小时，每次似乎还有另一个小问题，我似乎无法弄明白。在这个特殊问题中，徽标不会与其他导航项一致。

非常感谢任何帮助。

此外，当缩小窗口时，导航项目没有响应，也就是说它们不会换行到适合较小屏幕的新行。

另外，当我创建一个容器流体并试图用另一种颜色非常简单地设置bg颜色的样式时，为什么在定位＆＃34; maincontent＆＃34;的第二个选择器时它没有响应？在

<div class="container-fluid maincontent">

我想我今天已经看了这么久了。提前致谢

Answer 1

您缺少bootstrap导航栏元素。

Fiddle working Demo

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Galaxies</a></li>
      <li><a href="#">Telescopes</a></li>
      <li>
        <a class="navbar-brand nav-image" href="#"><img src="https://www.shareicon.net/download/2016/07/11/794282_education_512x512.png" /></a> 
        <li><a href="#">Projects</a></li>
        <li><a href="#">Get involved</a></li>
    </ul>
    </div>
  </div>
</nav>

添加此内容。因为，padding-top:15px来自图像上的引导程序。

.nav-image img{
  margin-top: -15px;
}

Answer 2

我尝试了填充顶部，但事实证明margin-top: -15px;就是答案。不确定解释的区别是什么，但这是bootstrap.css地址.navbar-nav > li > a的选择器，这就是解决方案的样子：

<nav class="navbar navbar-inverse navbar-fixed-top fixed-top">
  <div class="container-fluid">
    <nav class="nav">
      <a class="nav-link" href="#">Galaxies</a>
      <a class="nav-link" href="#">Telescopes</a>
        <div class="logo">
          <a class="navbar-brand custom-logo" href="#"><img src="https://www.shareicon.net/download/2016/07/11/794282_education_512x512.png" /></a>
        </div>    
      <a class="nav-link" href="#">Projects</a>
      <a class="nav-link" href="#">Get involved</a>
    </nav>
  </div>
</nav>

使用这个CSS：

.navbar {
background-color: transparent;
background: transparent;
border-color: transparent;
border-radius: 0;
display: flex;
margin: 0;
}
.nav {
display: inline-flex;
flex-wrap: wrap;
font-size: 28px;
}

.navbar-brand img {
    height: auto; 
    margin-top: -20px;
    width: 50px; 
}

.nav-link {
    margin-right: 2rem;
}

JSFiddle

导航徽标不是内联的

2 个答案: