navbar

I would like to switch the brand and the toggle button in mobile view if the viewport is small enough. On desktop viewport the brand icons shall be on the right side and the links shall be displayed normaly.

Examples:

Desktop:

+--------------------------------------------+
|Link1 Link2           BrandIcon1 BrandIcon2 |
+--------------------------------------------+

Mobile:

+----------------------------+
|[=]   BrandIcon1 BrandIcon2 |
+----------------------------+

What is the easiest and cleanest way to code this?

Made a Pen: http://codepen.io/Kaito23/pen/Wxmxgm

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-toggle {
  float:left;
}
.navbar-brand {
  float: right;
}

<nav class="navbar navbar-default">
  <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">
      <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>
      </ul>
     
      <ul class="visible-xs visible-xs visible-sm visible-md visible-lg nav navbar-nav navbar-right">
        <li><a href="#"><img src="http://images.fatcow.com/icons/32/wordpress.png" /></a></li>
        <li><a href="#"><img src="http://www.wbdesignideas.com/images_drf_color.png" /></a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

---

Let's take Bootstrap's default navbar and remove unnecessary parts.

Then change floats to the opposite direction.

And add second brand before the first one. (It's because of the float: right; property.)

Please check the result: http://codepen.io/glebkema/pen/PzLbmz

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (min-width: 768px) {
  .navbar-header {
    float: right;
  }
}
.navbar-brand {
  float: right;
}
.navbar-toggle {
  float: left;
  margin-left: 15px;
  margin-right: 0;
}

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
      <a class="navbar-brand" href="#">Brand 2</a>
      <a class="navbar-brand" href="#">Brand 1</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Left 1</a></li>
        <li><a href="#">Left 2</a></li>
        <li><a href="#">Left 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

链接地址: http://www.djcxy.com/p/69020.html

上一篇: 如何在bootstrap中固定顶部导航栏4

下一篇: 导航栏