Bootstrap 垂直对齐和子导航 [英] Bootstrap vertical align and sub navigation

问题描述

我在定位二维菜单时遇到了问题.它像图像一样在同一行中，我想将它放在行的底部.现在它被放置在行的顶部，看起来像这样:

标题现在的样子.

这是我的代码:

<div class="span2"><img src="stockpulse.png" class="img-rounded">
<ul class="nav nav-tabs">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a><ul class="下拉菜单"><li><a href="#">动作</a></li><li><a href="#">动作</a></li><li><a href="#">动作</a></li>
...

它应该是这样的:

带有显示子站点子类别的下拉菜单的标题:

如果我想永久显示子类别，在导航栏中使用下拉菜单是否正确?还是导航栏中的导航更有用?

解决方案

这是您要找的吗:http://jsfiddle.net/8xa5h/

基本上，我所做的只是根据图像的高度向导航栏添加一个 margin-top.

.navbar .nav {边距顶部:120px；}

I've a problem to position a two-dimensional-menue. It's in the same row like an image and i want to place it on the bottom of the row. Now it's placed on the top of the row and looks like this:

Header how it looks like now.

Here my code:

<div class="row">
    <div class="span2">
        <img src="stockpulse.png" class="img-rounded">
    </div>
    <ul class="nav nav-tabs">
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a  href="#">Action</a></li>
                <li><a  href="#">Action</a></li>
                <li><a  href="#">Action</a></li>
             </ul>
        </li>
        <li class="dropdown">
                ...
    </ul>
</div>

It should look like this:

Header with a dropup menue showing the subcategories on a subsite:

Is it right to use a dropdown menue in a navbar if i want to show the subcategories permanently? Or is a nav in a navbar more useful?

解决方案

Is this what you were looking for: http://jsfiddle.net/8xa5h/

Basically, all I did was adding a margin-top to the navbar according to the height of the image.

.navbar .nav {
    margin-top: 120px;       
}

这篇关于Bootstrap 垂直对齐和子导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！