如何在引导固定导航中间放置徽标图像？

Question

我正在尝试使用bootstrap创建一个网站，之前我使用过bootstrap。这次我正在制作一个带有固定导航的网站，徽标将位于导航链接的中间。我还希望徽标位于导航链接的顶部。

此图片将显示我要做的事情：

我现在的代码是：

＆＃13;

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'Helvetica', serif;
}

.navbar {
  background: none;
  border: none;
  margin-top: 20px;

}

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
  margin-left: -40px;
}

.navbar ul li {
  display: block;
  text-align: center;
  float: left;
  width: 20%;

}

.fourth-color {
  background-color: #ffecec;
  padding-top: 30px;
  padding-bottom: 30px;
}

.third-color {
  background-color: #122212;
  padding-top: 30px;
  padding-bottom: 30px;
}

.second-color {
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
}

.first-color {
  background-color: #f25727;
  padding-top: 30px;
  padding-bottom: 30px;
}

＆＃13;

<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul>
      <li class="first-color"><a href="#">First</a></li>
      <li class="second-color"><a href="#">Second</a></li>
      <li><a href="#">Logo</a></li>
      <li class="third-color"><a href="#">Third</a></li>
      <li class="fourth-color"><a href="#">Fourth</a></li>
    </ul>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

当我尝试链接图像时，它不适合并且拧紧整个导航栏。任何帮助表示赞赏！

Answer 1

你的问题是你只有填充了类的li。 （这就是说徽标不居中的锚是因为它没有带填充的类）

离。

.navbar ul li {
  display: block;
  text-align: center;
  float: left;
  width: 20%;
}

.fourth-color, .third-color, .second-color, .first-color {
  padding-top: 30px;
  padding-bottom: 30px;
}

将填充应用于所有列表，您的问题已修复。

.navbar ul li {
  padding-top: 30px;
  padding-bottom: 30px;
}

至于中间标志。您必须使用position relative，然后按类或我的情况:nth-child添加其他样式，如下所示。

@import url("http://fonts.googleapis.com/css?family=Raleway&subset=latin,latin-ext");

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 14px;
  font-family: 'Helvetica', serif;
}

.navbar {
  margin-top: 1em;
  text-align: center;
}

.navbar ul {
  padding: 0;
  text-decoration: none;
  list-style: none;
}

.navbar li {
  display: block;
  float: left;
  width: calc(20% - 1px - 0.906752000000002em);
  padding: 1.16em 1em;
  font: 100 21px "Raleway", sans-serif;
  background: #000;
  color: #fff;
  opacity: 1;
  transition: all 0.1s linear;
}

.navbar li:nth-child(1) {
  background: #ff410e;
}

.navbar li:nth-child(2) {
  background: #f4ca00;
}

.navbar li:nth-child(3) {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 2.84em;
  padding: 1.76em 0;
  width: 20%;
  position: relative;
  margin: -0.64em -2.16em;
  z-index: 1;
}
.navbar li:nth-child(3) a {
  color: #000;
}

.navbar li:nth-child(4) {
  background: #99d81b;
}

.navbar li:nth-child(5) {
  background: #00abf3;
}

.navbar li:hover:not(:nth-child(3)) {
  opacity: 0.7;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}
.navbar .active {
  text-decoration: underline;
}

<!-- Start of Nav Bar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul>
      <li><a class="active" href="#">First</a></li>
      <li><a href="#">Second</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Third</a></li>
      <li><a href="#">Fourth</a></li>
    </ul>
  </div>
</nav>

除非您打算创建下拉列表，否则我不建议使用此菜单栏的列表。而是you can just style the anchors to fit your needs。 （请记住保留代码DRY）：