3列网格导航栏引导程序

Question

我正在尝试创建一个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;
}

这是我想要复制的内容:

Answer 1

您好，大于 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;
}

它使用简单的浮子来实现流体中心。但是当在较小的屏幕上时，您需要在元素之间移动，因此也许使用菜单是一个好主意，因此当屏幕小于 768 时，它会切换到另一个屏幕。