Question

我的@media（max-width：767px）屏幕的引导程序导航菜单有问题。问题是我将移动的ICON-BAR移到右边，我试图在页面中间居中（页面链接Home，Pages等）。所以我的想法是将图标栏放在页面的右侧，当按下图标栏向下滚动时（页面中间的居中菜单）。

＆＃13;

body { background: red; }
.navbar { float: left; color: #000; margin: 40px 80px 0 0; } 
.navbar a { color: #fff; margin-bottom: 3px; }
.navbar a:hover { background: none !important; margin-bottom: 0; border-bottom: 6px solid #11749e; }

.navbar-toggle .icon-bar { display: block; width: 28px; height: 4px; background-color: #cccccc; border-radius: 1px; }

@media (max-width: 767px) {
	.navbar { float: right; }

}

＆＃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.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- NAVBAR -->
<nav class="navbar">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div><!-- .navbar-header -->
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="index.html">Pages</a></li>
        <li><a href="index.html">Features</a></li>
        <li><a href="index.html">Extensions</a></li>
        <li><a href="index.html">Tutorials</a></li>
        <li><a href="index.html">Contact Us</a></li>
      </ul>
    </div><!-- .nav-collapse -->
</nav>

＆＃13;

Bootstrap移动导航中心的内容

0 个答案: