html – 3列网格导航栏引导程序
发布时间:2020-12-14 18:40:43 所属栏目:资源 来源:网络整理
导读:我正在尝试创建一个3列网格导航栏,我已尝试使用内置到引导程序中的列但没有成功. 第一列需要具有100px的最大宽度,但如果重新调整大小,则可以是流畅的 第二列需要填充第1列和第2列之间的间隙,并且如果浏览器重新调整大小,则响应也很流畅. 第三列需要具有200px
我正在尝试创建一个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作为解决问题的方法.请考虑以下小提琴:
http://jsfiddle.net/Xsfvw/10/ 它使用以下设计模式: <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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |