html – 3列网格导航栏引导程序

概述我正在尝试创建一个3列网格导航栏,我已尝试使用内置到引导程序中的列但没有成功. 第一列需要具有100px的最大宽度,但如果重新调整大小,则可以是流畅的 第二列需要填充第1列和第2列之间的间隙,并且如果浏览器重新调整大小,则响应也很流畅. 第三列需要具有200px的最大宽度,但如果重新调整大小,则可以是流畅的 我无法让列彼此内联,继承人我的小提琴：http://jsfiddle.net/Xsfvw/ 我正在尝试创建一个3列网格导航栏,我已尝试使用内置到引导程序中的列但没有成功.

第一列需要具有100px的最大宽度,但如果重新调整大小,则可以是流畅的

第二列需要填充第1列和第2列之间的间隙,并且如果浏览器重新调整大小,则响应也很流畅.

第三列需要具有200px的最大宽度,则可以是流畅的

我无法让列彼此内联,继承人我的小提琴：http://jsfiddle.net/Xsfvw/7/

<!--bootstrap Approach--><div >    <div >        <div >logo</div>        <div >Nav</div>        <div >Right</div>    </div></div><!--Standard CSS Approach--><div >    <div >        <div >logo</div>        <div >Nav</div>        <div >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作为解决问题的方法.请考虑以下小提琴：

http://jsfiddle.net/Xsfvw/10/

它使用以下设计模式：

<div >  <div >      <div >Nav</div>      <div >logo XS</div>      <div >Right</div>      <div >logo SM</div>      <div >Nav </div>      <div >Right</div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 3列网格导航栏引导程序全部内容，希望文章能够帮你解决html – 3列网格导航栏引导程序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。