我试图在bootstrap导航菜单的左侧放置一个圆形徽标,让菜单与行的底部对齐,但它总是想要与顶部对齐。我用玉写了这篇文章,但希望其他语言的人至少可以理解它是如何工作的(缩进表示嵌套而不是关闭标签)。有没有办法可以使用css或在引导程序中使用网格系统轻松完成此操作?
doctype 5
html
head
title= title
link(rel='stylesheet', href='/css/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
.container
.row
.span3
img(id='add-razaoSocial', src='KSUB_PLATTER_Full.png', width=100)
.row
.span9
.navbar(class="pull-left")
.navbar-inner
a(class='brand')
ul(class="nav nav-tabs")
li
a(href='#') About
li
a(href='#') Schedule
li
a(href='#') Events
li
a(href='#') Gallery
block content
script(src='http://code.jquery.com/jquery.js')
script(src='/js/bootstrap.min.js')
答案 0 :(得分:1)
我认为问题来自于在导航栏内创建所需的标签页(以及包装标签页的navbar-inner内部)。您尝试实现的选项卡不需要包含在导航栏中(导航栏设计得非常好,可以固定/静态到顶部或底部)。有关nav-tabs http://twitter.github.com/bootstrap/components.html#navs
的信息,请参阅他们的文档独立<ul class="nav nav-tabs">
应该更容易包装和设置边距/填充。可能还会将图像下方行的CSS位置属性设置为绝对值。和内容相关。