I am trying to have a circular logo placed to the left of a bootstrap nav menu and have the menu align with the bottom of the row but it always wants to align with the top. I wrote this in jade but hopefully people with other languages can at least understand how it works (indents signify nestings instead of having closing tags). Is there a way i can easily do this with css or using the grid system in bootstrap?
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')
I think the problem is coming from creating the tabs you want inside of a navbar (and inside navbar-inner, which wraps your tabs). The tabs you're trying to achieve don't need to be wrapped inside a navbar (which is pretty well designed to be fixed/static to top or bottom). See their documentation for nav-tabs http://twitter.github.com/bootstrap/components.html#navs
A standalone <ul class="nav nav-tabs"> should be much easier to wrap and set margins/padding. Might also set the CSS position property of the row beneath your image to be absolute. and contents relative.