我正在尝试创建一个3列网格导航栏,我已尝试使用内置到引导程序中的列但没有成功.
第一列需要具有100px的最大宽度,但如果重新调整大小,则可以是流畅的
第二列需要填充第1列和第2列之间的间隙,并且如果浏览器重新调整大小,则响应也很流畅.
第三列需要具有200px的最大宽度,则可以是流畅的
我无法让列彼此内联,继承人我的小提琴：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：
.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;
}
这是我想要复制的内容：
解决方法
Bootstrap支持根据屏幕宽度隐藏和显示网格图块.考虑使用visible – * – block作为解决问题的方法.请考虑以下小提琴：
它使用以下设计模式：
<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>
