twitter-bootstrap 3 列网格导航栏引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24460433/
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
3 column grid navbar bootstrap
提问by JT1
I am trying to create a 3 column grid navbar, I have tried using the columns that are built into bootstrap but have no success.
我正在尝试创建一个 3 列网格导航栏，我尝试使用内置于引导程序但没有成功的列。
The first column needs to have a max-width of 100px, but can be fluid if the browser is re-sized
第一列的最大宽度需要为 100 像素，但如果浏览器重新调整大小，则可以是可变的
the second column needs to be the fill the gap between the 1st and 2nd column and is also fluid to respond if the browser is re-sized.
第二列需要填补第一列和第二列之间的空白，并且如果浏览器重新调整大小，也可以灵活响应。
The third column needs to have a max-width of 200px, but can be fluid if the browser is re-sized
第三列的最大宽度需要为 200 像素，但如果浏览器重新调整大小，则可以是流畅的
I am unable to get the columns inline with each other, heres my Fiddle: http://jsfiddle.net/Xsfvw/7/
我无法使列彼此内联，这是我的小提琴：http: //jsfiddle.net/Xsfvw/7/
<!--Bootstrap Approach-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-8 col-sm-3 border">Logo</div>
<div class="col-xs-2 col-sm-6 border">Nav</div>
<div class="col-xs-2 col-sm-3 border">Right</div>
</div>
</div>
<!--Standard CSS Approach-->
<div class="container-fluid">
<div class="row">
<div class="nalogo">Logo</div>
<div class="nanav">Nav</div>
<div class="naright">right</div>
</div>
</div>
CSS:
CSS：
.border {
border: 2px solid #ff0000;
z-index: 1020;
height: 50px;
margin-bottom: 30px;
}
.nalogo {
width:100px;
height:50px;
background-color:#ff0000;
border: 1px solid #000;
float: left;
}
.nanav {
width:100%;
height:50px;
background-color:#00ff00;
border: 1px solid #000;
margin:0 auto !important;
}
.naright {
display: inline-block;
width:200px;
height:50px;
background-color:#0000ff;
border: 1px solid #000;
float: right;
}
Here is what i am trying to replicate:
这是我试图复制的内容：
回答by Nicholas Blasgen
Bootstrap supports hiding and showing grid tiles based on the width of the screen. Consider using visible-*-blockas a way to address your issue. Please consider the following fiddle:
Bootstrap 支持根据屏幕宽度隐藏和显示网格图块。考虑使用visible-*-block作为解决问题的一种方式。请考虑以下小提琴：
It uses the following design pattern:
它使用以下设计模式：
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 visible-xs-block border">Nav</div>
<div class="col-xs-8 visible-xs-block border">Logo XS</div>
<div class="col-xs-2 visible-xs-block border">Right</div>
<div class="col-sm-3 visible-sm-block visible-md-block border">Logo SM</div>
<div class="col-sm-6 visible-sm-block visible-md-block border">Nav </div>
<div class="col-sm-3 visible-sm-block visible-md-block border">Right</div>
</div>
</div>
回答by Mats Kruger
Hello for the greater than 768px. You could use something like this.
你好大于 768px。你可以使用像这样。
.container-fluid {
width: 100%;
background: #222;
}
.row {
width: 100%;
}
.row > div {
color: #FFF;
}
.nalogo {
float: left;
width: 150px;
background: red;
}
.nanav {
}
.naright {
float: right;
width: 200px;
background: blue;
}
It uses simple floats to accomplish a fluid center. but when on smaller screen you need to move around the elements, so maybe it would be a good idea to have to menus, so when the screen is smaller than 768 it switches to the other one.
它使用简单的浮动来实现流体中心。但是当在较小的屏幕上时，您需要在元素周围移动，所以也许必须使用菜单是个好主意，所以当屏幕小于 768 时，它会切换到另一个。
