twitter-bootstrap 如何使引导导航栏移动友好？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40713869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a bootstrap navbar mobile friendly?
提问by Melmsie
I don't have a specific code example, just looking for a general answer. I know my navbar doesn't resize well in mobile, so is there a good/correct way to fix this? Someone said media queries, but I don't know anything about them.
我没有具体的代码示例，只是在寻找一般性的答案。我知道我的导航栏在移动设备中不能很好地调整大小，那么有没有好的/正确的方法来解决这个问题？有人说媒体查询，但我对他们一无所知。
If I DO need media queries, what's a good resource to learn about them? Everything else looks fine when I use col-md-(), just not the navbar :/
如果我确实需要媒体查询，那么了解它们的好资源是什么？当我使用 col-md-() 时，其他一切看起来都很好，只是不是导航栏：/
body {
font-family: 'News Cycle', sans-serif;
font-size: 175%;
}
li {
float: right;
text-align: left
}
link {
link
}
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #232323;
}
a:active {
text-decoration: underline;
color: #000000;
}
.main-section {
background-image: url(../img/back.jpg);
background-size: cover;
height: 1000px;
color: white;
}
.navbar {
position: fixed;
width: 100%;
}
.container-fluid {
padding-left: 0px;
}
.main {
padding: 400px 0px 360px 0px;
text-shadow: 1px black;
}
.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;
}
.headers-bfg {
padding-left: 35px;
}
.navbar-brand {
font-size: 20px;
letter-spacing: .5px;
}
h1 {
font-size: 70px;
}
h3 {
font-size: 35px;
}
.fa-circle {
color: gray;
font-size: .4em;
padding-top: 23px
}
.info-panel {
padding: 50px 50px 50px 50px;
}
.balloon-sect {
background-color: skyblue;
}
.flower-sect {
background-color: #f4f6f9;
}
.gift-sect {
background-color: #ce6640;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Balloons Flowers and Gifts</title>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">
<!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->
<script src="https://use.fontawesome.com/7a267289ed.js"></script>
<link rel="stylesheet" type="text/css" href="css/bfg.css">
<link rel="icon" href="img/icon.png">
</head>
<body>
<div class="container-fluid main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li><a href="#">Balloons</a></li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Flowers</a></li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Gifts</a></li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Hours</a></li>
</ul>
</div>
</nav>
<div class="">
<div class="row">
<div class="col-md-12 col-xs-12 text-center main">
<h1>Balloons Flowers and Gifts</h1>
<h3>The perfect way to brighten someone's day, and make them smile!</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
<a href="#"><h2>Balloons</h2></a>
<p> Our hand crafted balloon creations are a hit at every! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon things for events!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
<a href="#"><h2>Flowers</h2></a>
<p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
</div>
<div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
<a href="#"><h2>Gifts</h2></a>
</div>
<div class="col-md-12 col-xs-12 text-center">
<a href="#"><h2>Hours</h2></a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
html css twitter-bootstrap采纳答案by Gulliva
You shouldn't use div class="col-md" in the navbar. Look at the bootstrap example:
您不应在导航栏中使用 div class="col-md"。查看引导程序示例：
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/components/#navbar
Normaly Bootstrap resizes the navbar automatically for you.
Normaly Bootstrap 会自动为您调整导航栏的大小。
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
If you want to learn about media-queries you can look here:
如果你想了解媒体查询，你可以看这里：
回答by Mayank Nimje
You can learn more about media queriesfrom below url: http://www.templatemonster.com/blog/css-media-queries-for-all-devices-and-browsers-including-ie7-and-ie8/it will explains about media queriesand how to make it work on other devices including IE7 and IE 8 fallback mechanism.
您可以从以下网址了解有关媒体查询的更多信息：http: //www.templatemonster.com/blog/css-media-queries-for-all-devices-and-browsers-include-ie7-and-ie8/它将解释关于媒体查询以及如何使其在其他设备上工作，包括 IE7 和 IE 8 回退机制。
Also, if you want to learn bootstrap, you can use bootstrap GUI designing tool: http://www.bootply.com/new
另外，如果你想学习bootstrap，你可以使用bootstrap GUI设计工具：http: //www.bootply.com/new
Hope it will help.
希望它会有所帮助。
