Question

忍受我。

所以我有一个标准导航，其中有一个微小的变化，它在css中被设置为150px高，所以更大的标志将放在左边的那里＆＃34;品牌＆＃34;通常是在演示中。

我想做的是这样的 - 最后三项是所有服务。我真的不想下降，所以我想要有 ----------------------服务----------------------
评估改进事件响应
在上面。通常情况下，我会在页面上使用div工作，但在这种情况下，我无法弄清楚如何将其添加到菜单的UL中。

任何想法如何做到这一点可能与：之前或某事？

HTML：

<div class="collapse navbar-collapse" id="topFixedNavbar1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">About</a></li>
          <li><a href="news-resources.html">News</a></li>
          <li><a href="#">Contact</a></li>

          <li><a href="#">Assessments</a></li>
          <li><a href="#">Improvements</a></li>
          <li><a href="#">Incident Response</a></li>


        </ul>

      </div>

Answer 1

如果你愿意，你几乎可以插入一个div：也许这会帮助你开始。

Navbar-collapse分为两个单独的navbar-nav元素，第二个元素位于第二个链接上方，新的services类位于第二个链接之上。

＆＃13;

body,
html {
  margin-top: 175px;
}
.navbar.navbar-custom {
  height: 150px;
  border-bottom: 4px solid #444;
}
.navbar-custom .services {
  color: #444;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-top: -25px;
}
.navbar-custom .navbar-nav {
  margin-top: 45px;
}
.navbar-custom .navbar-right .navbar-nav > li > a {
  font-size: 12px;
}
@media (max-width: 767px) {
  .navbar-custom .services {
    text-align: left;
    padding-left: 15px;
    padding-top: 20px;
  }
  .navbar-custom .navbar-toggle,
  .navbar-custom .navbar-collapse {
    margin-top: 55px;
    background: #f5f5f5;
    border: none;
  }
  .navbar-custom .navbar-nav {
    margin-top: 15px;
  }
  .navbar-custom .navbar-right .navbar-nav > li > a {
    font-size: 14px;
  }
}

＆＃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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" 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>
      <a class="navbar-brand" href="#">
        <img src="http://placehold.it/200x115/444/fff?text=Logo">
      </a>

    </div>
    <div class="collapse navbar-collapse navbar-right" id="topFixedNavbar1">
      <ul class="nav navbar-nav">
        <li><a href="#">About</a>

        </li>
        <li><a href="news-resources.html">News</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav">
        <div class="services">Services</div>
        <li><a href="#">Assessments</a>

        </li>
        <li><a href="#">Improvements</a>

        </li>
        <li><a href="#">Incident</a>

        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="well wel-lg">Some Junk</div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

＆＃13;

Bootstrap固定导航浮动线和文本

1 个答案: