大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – 导航栏中的两行,其中一列跨两行,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
+-------------------------------------------------------------------------------+ | | Login [ search ] | | SITE logo |---------------------------------------------------------------+ | | Page 1 | Page 2 | Page 3 | Page 4 | +-------------------------------------------------------------------------------+
我觉得没有办法使这项工作。我试图这个徒劳?
@H_197_6@更新:请参阅下面的复制的解决方案,我使用Twitter Bootstrap 3.原来的问题和答案是对Bootstrap 2。
<div class="container"> <div class="navbar"> <div class="navbar-inner"> <img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px"> <div class="span10"> <div class="row"> <div class="span2 offset5" style="text-align:right"> <div class="navbar-text"> <p><a href="#">Login</a></p> </div> </div> <div class="span2 offset1"> <div class="pull-right"> <form class="navbar-form"> <div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">Search</button> </div> </form> </div> </div> </div> <div class="row"> <div class="span10"> <ul class="nav pull-right"> <li><a href="#">Page 1</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 2</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 3</a></li> <li class="divider-vertical"></li> <li><a href="#">Page 4</a></li> </ul> </div> </div> </div> </div> </div> </div>
TWITTER BOOTSTRAP 3更新:
TBS3的导航栏的标记改变了轻微,他们的脚手架。这里是我的原始解决方案的两个重复,一个完全匹配的原始和一个变化。
精确复制
http://jsfiddle.net/technotarek/t67Ms/
使用全宽Navbar进行复制
http://jsfiddle.net/technotarek/HxvLS/
(提示,您可以调整第二次复制,以便所有内部元素通过删除nav标签后面紧跟的div.container元素来覆盖整个导航栏)。
@H_197_6@ @H_197_6@以上是大佬教程为你收集整理的twitter-bootstrap – 导航栏中的两行,其中一列跨两行全部内容,希望文章能够帮你解决twitter-bootstrap – 导航栏中的两行,其中一列跨两行所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。