Css / Bootstrap：如何在移动模式下对齐所有列表项目时，在大屏幕中，他们左右拉动？(Css/Bootstrap : How can i align all list items in mobile mode when in large screen they got pull right and left?)
比方说，在我的大屏幕上，我的列表项有拉右或拉左编码，如下所示：
<header id="main-header"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand hidden-xs hidden-sm"> logo </a> </div> <button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-bars"></span> </button> <div class="collapse navbar-collapse" id="main-navigation-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Recommendation</a></li> <li><a href="#">Best Seller</a></li> </ul> <ul class="nav navbar-nav pull-right"> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav> </header>css：
* { box-sizing: border-box; } body { width: 100%; height: 1400px; font-family: sans-serif; font-size: 1em; line-height: 1.2em; padding: 0; } /*======================= H E A D E R ========================*/ #main-header { width: 100%; height: 250px; position: relative; } /* main navbar */ .navbar.navbar-default { position: absolute; width: 100%; margin : 0; bottom: 0; } .navbar-header { position: relative; left: 50%; } /*======================= M E D I A Q U E R I E S ========================*/ @media screen and (max-width: 991px) { } @media screen and (max-width: 767px) { .navbar-toggle { display: block; margin-right: 250px; } }所有在桌面等大屏幕上运行良好。 但是当我切换到手机屏幕（767px）时，当我点击酒吧按钮列表正在到处图像 。 我怎么解决这个问题 ？ 谢谢。
let say in my large screen my list items got pull right or pull left coded like this :
<header id="main-header"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand hidden-xs hidden-sm"> logo </a> </div> <button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-bars"></span> </button> <div class="collapse navbar-collapse" id="main-navigation-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Recommendation</a></li> <li><a href="#">Best Seller</a></li> </ul> <ul class="nav navbar-nav pull-right"> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </nav> </header>css :
* { box-sizing: border-box; } body { width: 100%; height: 1400px; font-family: sans-serif; font-size: 1em; line-height: 1.2em; padding: 0; } /*======================= H E A D E R ========================*/ #main-header { width: 100%; height: 250px; position: relative; } /* main navbar */ .navbar.navbar-default { position: absolute; width: 100%; margin : 0; bottom: 0; } .navbar-header { position: relative; left: 50%; } /*======================= M E D I A Q U E R I E S ========================*/ @media screen and (max-width: 991px) { } @media screen and (max-width: 767px) { .navbar-toggle { display: block; margin-right: 250px; } }All is working well in large screens like desktop. but when i switch to mobile screens (767px) when i click the bars button the list are going everywhere image. how can i solve this problem ? thanks.
最满意答案
使用navbar-right而不是pull-right 。
工作示例
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header id="main-header">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand hidden-xs hidden-sm">
logo
</a>
</div>
<button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Recommendation</a></li>
<li><a href="#">Best Seller</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
</body>
</html>
Use navbar-right instead of pull-right.
Working example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header id="main-header">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand hidden-xs hidden-sm">
logo
</a>
</div>
<button class="navbar-toggle" data-target="#main-navigation-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Recommendation</a></li>
<li><a href="#">Best Seller</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</body>
</html>
</body>
</html>
更多推荐
发布评论