我是Boot Strap 3的新手。使用响应式布局。
我有一个居中对齐的徽标，下面是一个导航栏，其链接很少，例如“关于我们”“联系我们”“常见问题”等。
我的要求是 高于1024分辨率，导航栏应显示在栏中的徽标下方。
低于1024分辨率时，应将其折叠并在徽标的右侧进行查看。
请告知。
答案 0 :(得分：0)
1024px不是Bootstrap默认配置中的断点。您可以自定义移动导航栏在http://getbootstrap.com/customize/处启动时的断点，但它会影响所有内容分解为移动设备的时间。默认值为768px。因此，在未修改的Bootstrap默认情况下，所有内容（所有窗体，折叠，导航栏文本等）都必须更改，同时适用的最大宽度也是如此，这样就是767px。如果你不使用LESS那么这很痛苦。
这仅适用于调整所有CSS在上面段落中指示的点处中断导航栏的情况。在下面的Bin中，已完成，您将需要搜索1023px和1024px以查看它们在您的Bootstrap安装中的位置。做一个备份。此外，当您在几天内更新到3.1.0时，除非您使用LESS，否则您需要再次执行此操作，这将简化此工作。
这是将徽标置于导航下方的HTML结构。它与文档没有区别，只是它添加了图像。
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="yourlink.html" class="navbar-brand">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png" alt="company name">
</a>
</div><!--/.navbar-header-->
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#testme1" class="anchor">Anchor 1</a></li>
<li><a href="#testme2" class="anchor">Anchor 2</a></li>
<li><a href="#testme3" class="anchor">Anchor 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Test</a></li>
<li><a href="#">Another link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul><!--/.navbar-nav-->
</div><!--/.nav-collapse -->
</div><!--/.container-->
</div><!--/.navbar-->
<强> CSS
此CSS使用最小宽度1024px。对于默认的Boostrap 3.0.3 CSS，这个最小宽度是768px。这些添加样式与您和默认引导程序不同，您可以删除，调整或其他任何内容。
/* logo container padding on right so it doesn't hit the toggle */
.navbar-brand {
text-decoration: none;
padding-right: 80px;
float: left;
width: 70%; /* adjust as needed */
}
/* logo image */
.navbar-brand img {
max-width: 100%;
min-width: 90px;
max-height: 50px;
}
/* so that the navbar has some bottom white space */
.main-page {
margin-top: 20px
}
.navbar-toggle {
position:absolute;
right:0;
top:10px;
}
@media (min-width:1024px) {
.navbar-header {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: -120px;
/*logo position */
}
/* hide logo after scroll past navbar height */
.showlogo {
display: none
}
.navbar-collapse {
float: left;
width: 100%;
margin: 0;
position: relative;
margin-top: -50px;
padding-top: 50px;
}
/* brand for tablet and up */
.navbar-brand {
text-align: center;
float: none;
width: 100%;
padding: 0;
}
.navbar-brand img {
max-height: 80px
}
/* centered navigation */
.nav.navbar-nav {
float: left;
background: transparent!important;
}
.nav.navbar-nav > li:not(.dropdown) > a:after {
content: "/";
display: inline-block;
padding-left: 30px;
margin-right: -30px;
}
.nav.navbar-nav > li:last-child:not(.dropdown) > a:after {
content: ""
}
.nav.navbar-nav > li.active > a,
ul.nav.navbar-nav > li.dropdown.open > a.dropdown-toggle {
background: transparent;
position: relative;
}
.nav.navbar-nav li.dropdown > ul {
left: 15px
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
padding-left: 15px;
padding-right: 15px;
}
.nav.navbar-nav li {
text-align: left
}
/* page styles */
.main-page {
margin-top: 150px
}
}
注意：响应式实用程序无法在导航栏中运行，因为媒体查询已更改。还有很多工作要解决这些问题，你需要弄清楚。可能需要制作两组（大约400多行CSS并在类之前用.navbar隔离）。
答案 1 :(得分：0)
由于你是初学者，我认为坚持现有的断点是明智的，就像在你的示例链接中一样。
尝试将徽标放在html中两次，并通过匹配相同断点的媒体查询显示/隐藏任何一个带有CSS的徽标。请参阅：http://bootply.com/103276。