Question

I'm using Bootstrap.

I have links that are outside of the Navbar.

</nav>
<ul>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<ul>

I also have the same links inside the Navbar, but with a "visible-xs" class attached, so that they only appear inside the Mobile Navbar. (with hamburger toggle icon menu)

<ul class="visible-xs">
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<li><a href="#" class="outside-link">Outside Link</a></li>
<ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

My current code works the way I would like, however, I do not want to write out the HTML links twice. http://codepen.io/Goatsy/pen/yJeqjz

How do I place the outside links, inside ONLY the Mobile Navbar, without having to write the links twice in the HTML?

Ultimately, I would like these "outside links" to show on Desktop, outside of the navbar.

For Mobile, they will be, essentially, "moved" inside the navbar.

Answer 1

您可以使用CSS和正确的HTML结构来完成此操作。使用navbar-right从您的标准链接中分离您的外部链接，然后在媒体查询中使用position: absolute，以便它们仅在767px以上的导航栏之外。

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    top: 100%;
    left: 0;
  }
}

工作示例I

＆＃13;

/*FOR DEMO ONLY*/

.navbar.navbar-default {
  margin-bottom: 0;
}
/*FOR DEMO ONLY*/

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    top: 100%;
    left: 0;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right ul-outside">
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
  <div class="container">
    <h1>
      Outer Links
    </h1>
  </div>
</div>
<!--DEMO CONTENT-->

＆＃13;

工作示例II：

＆＃13;

/*FOR DEMO ONLY*/

.navbar.navbar-default {
  margin-bottom: 0;
}
/*FOR DEMO ONLY*/

@media (min-width: 767px) {
  .navbar.navbar-default .ul-outside {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
  }
  .navbar.navbar-default .ul-outside > li {
    float: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right ul-outside">
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
        <li><a href="#">Outside</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
<!--DEMO CONTENT-->
<div class="jumbotron">
  <div class="container">
    <h1>
      Outer Links
    </h1>
  </div>
</div>
<!--DEMO CONTENT-->

＆＃13;

In Bootstrap, how do I place links that are outside of the Navbar, inside the mobile Navbar only? (without having to write them twice in the HTML)

1 个答案: