如何实现我的bootstrap导航设计？

时间：2016-01-03 09:46:13

标签： html css twitter-bootstrap

我有以下Twitter Bootstrap导航栏设计，目前看起来像下图...

Final navigation bar goal.

当它付诸实践时，它看起来像以下......

Current navigation style.

这只是正在使用的标准引导程序代码和CSS。我也想知道如何消除活动标签顶部和底部可以看到的微小间隙。

提前致谢。

编辑：

这是导航栏的当前代码。

.navbar {
  margin-bottom: 0;
}
.navbar-branded {
  background-color: #00b9f2;
  font-weight: bold;
  border-radius: 0;
}
.navbar-branded .navbar-brand {
  color: #ffffff;
}
.navbar-branded .navbar-brand:hover,
.navbar-branded .navbar-brand:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-text {
  color: #ffffff;
}
.navbar-branded .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-branded .navbar-nav > li > a:hover,
.navbar-branded .navbar-nav > li > a:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-nav > .active > a,
.navbar-branded .navbar-nav > .active > a:hover,
.navbar-branded .navbar-nav > .active > a:focus {
  color: #00b9f2;
  background-color: #ffffff;
}
.navbar-branded .navbar-nav > .open > a,
.navbar-branded .navbar-nav > .open > a:hover,
.navbar-branded .navbar-nav > .open > a:focus {
  color: #00b9f2;
}
.navbar-branded .navbar-toggle {} .navbar-branded .navbar-toggle:hover,
.navbar-branded .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-branded .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-branded .navbar-collapse,
.navbar-branded .navbar-form {} .navbar-branded .navbar-link {
  color: #ffffff;
}
.navbar-branded .navbar-link:hover {
  color: #00b9f2;
}
@media (max-width: 767px) {
  .navbar-branded .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #00b9f2;
  }
  .navbar-branded .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #00b9f2;
    background-color: #ffffff;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-branded">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Our Team</a>
        </li>
        <li>
          <a href="#">Schedule</a>
        </li>
        <li>
          <a href="#">Requests</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Partners</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

2 个答案:

答案 0 :(得分：2)

您可以使用表格布局在链接栏中分发链接，我相信您指的是围绕导航栏的边框，当涉及到＆＃34;间隙＆＃34;活动链接周围：border: none;。

@media (min-width: 768px) {
  .navbar.navbar-branded .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-branded .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-branded .navbar-nav > li > a {
    text-align: center;
  }
}

请参阅完整页面上的工作示例代码段。

＆＃13;
＆＃13; 
.navbar {
  margin-bottom: 0;
}
.navbar.navbar-branded {
  background-color: #00b9f2;
  font-weight: bold;
  border-radius: 0;
  border: none;
}
.navbar.navbar-branded .navbar-brand {
  color: #ffffff;
}
.navbar.navbar-branded .navbar-brand:hover,
.navbar.navbar-branded .navbar-brand:focus {
  color: #00b9f2;
}
.navbar.navbar-branded .navbar-text {
  color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > li > a {
  color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > li > a:hover,
.navbar.navbar-branded .navbar-nav > li > a:focus {
  color: #00b9f2;
}
.navbar.navbar-branded .navbar-nav > .active > a,
.navbar.navbar-branded .navbar-nav > .active > a:hover,
.navbar.navbar-branded .navbar-nav > .active > a:focus {
  color: #00b9f2;
  background-color: #ffffff;
}
.navbar.navbar-branded .navbar-nav > .open > a,
.navbar.navbar-branded .navbar-nav > .open > a:hover,
.navbar.navbar-branded .navbar-nav > .open > a:focus {
  color: #00b9f2;
}
.navbar.navbar-branded .navbar-toggle:hover,
.navbar.navbar-branded .navbar-toggle:focus {
  background-color: #ffffff;
}
.navbar-branded .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar.navbar-branded .navbar-collapse,
.navbar.navbar-branded .navbar-link {
  color: #ffffff;
}
.navbar.navbar-branded .navbar-link:hover {
  color: #00b9f2;
}
@media (max-width: 767px) {
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #00b9f2;
  }
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a,
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #00b9f2;
    background-color: #ffffff;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-branded .navbar-nav {
    display: table;
    width: 100%;
  }
  .navbar.navbar-branded .navbar-nav > li {
    display: table-cell;
    float: none;
  }
  .navbar.navbar-branded .navbar-nav > li > a {
    text-align: center;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-branded">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="bs">
      <ul class="nav navbar-nav">
        <li class="active">
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Our Team</a>
        </li>
        <li>
          <a href="#">Schedule</a>
        </li>
        <li>
          <a href="#">Requests</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Partners</a>
        </li>
        <li>
          <a href="#">Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以利用bootstrap的内置类.nav-justified和编辑背景，链接颜色和填充以匹配您的设计。

＆＃13;
＆＃13; 
=IF(A1="hat";IF(B1=1;5;IF(B1=2;10;""));IF(A1="glove";IF(B1=1;15;IF(B1=2;20));""))
＆＃13; 
.navbar {
  margin-bottom: 0;
}
.navbar.navbar-branded {
  background-color: #00b9f2;
  font-weight: bold;
  border-radius: 0;
  border: none;
}
.nav-justified {
  color: #ffffff;
}
.nav.nav-justified > li > a {
    text-align: left;
}
.nav-justified a {
  color: #ffffff;
}
.nav-justified a:hover,
.nav-justified:focus {
  color: #00b9f2;
}
.nav-justified .active > a,
.nav-justified .active > a:hover,
.nav-justified .active > a:focus {
  color: #00b9f2;
  background-color: #ffffff;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
}

@media (min-width: 768px) {
    .nav.nav-justified > li > a {
        text-align: center;
    }
    .nav.nav-justified > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题