html - 在 bootstrap 中将行对齐到相同位置

我是Bootstrap的新手，并且正在尝试将徽标和导航栏对齐到同一行。实际上，在下面的图像中。我希望菜单，徽标和导航栏从同一点开始。



我知道这12个网格系统是如何工作的。但是我们如何使嵌套在行内的类正确缩进。

这是我的HTML。

<section class="header-container jumbotron">
        <nav class="col-md-12 col-md-offset-2">
            <ul class="menu">
                <li> <a href="/"> HOME </a> </li>
                <li> <a href="pages/about"> ABOUT </a></li>
                <li> <a href="pages/register"> SUBMIT YOUR BUSINESS! </a></li>
                <li> <a href="pages/login"> LOGIN </a> </li>
                <li> <a href="pages/contact"> CONTACT US </a> </li>
            </ul>
        </nav>

        <div class="col-md-4 col-md-offset-2 logo">
            {{ HTML::image('img/logo.png', 'ethio360', array("height"=>44, "width"=>157))}}
        </div>

        <div class="container">
            <div class="search-bar col-md-12">

            {{ Form::open(['url'=>'/']) }}
                <div>
                    {{ Form::label('title', 'Title')}}
                    {{ Form::text('title') }}
                </div>

                <div>
                    {{ Form::label('body', 'Body') }}
                    {{ Form::text('body') }}
                </div>

                <div>
                    {{ Form::submit('Create Text')}}
                </div>
            {{ Form::close() }}
            </div>

        </div>
</section>

我唯一需要做的是首先显示菜单，然后显示徽标，最后显示搜索栏。
但它们都应从左起同一位置开始。
这是我的CSS。

.jumbotron{
    background: red;
    padding: 0;
    margin: 0;
}
.header-container{
    min-height: 325px;
    background: #ffd106;
    background: url(../img/city.jpg);
    border-top:1px solid #252525;
}

.menu{
    list-style-type: none;
}

.menu li a{
    color:#252525;
    float:left;
    font-size:11px;
    padding:1px 10px;
}

.logo{
    padding:10px;
}

.search-bar{
    width:80%;
    background: none repeat scroll 0% 0% #252525;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #545454;
    padding:5px 4px;
    color:#efefef;
    font-weight: normal;
}
.search-bar div{
    float:left;
    margin-left: 10px;
}
.search-bar div input{
    border:1px solid #CCC;
    padding:4px;
    margin-left:10px;
}

最佳答案

您的布局有几个问题：


您正在定义列宽加上偏移量大于12的列。
您没有将列放在行内。


我提出了一个小提琴来说明可能的解决方案。三个主要元素（导航栏，徽标和搜索栏）中的每一个都放置在自己的行中，并且所有元素的偏移量均为2。

Fiddle

HTML：

<section class="header-container jumbotron">
    <div class="row">
        <nav class="col-md-10 col-md-offset-2">
            <ul class="menu">
                <li> <a href="/"> HOME </a> </li>
                <li> <a href="pages/about"> ABOUT </a></li>
                <li> <a href="pages/register"> SUBMIT YOUR BUSINESS! </a></li>
                <li> <a href="pages/login"> LOGIN </a> </li>
                <li> <a href="pages/contact"> CONTACT US </a> </li>
            </ul>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-2 logo">
            <span style="border: 1px solid gray;">Here goes the logo</span>
        </div>
    </div>
    <div class="row">
        <div class="search-bar col-md-10 col-md-offset-2">

            <form>
                <div>
                    <label for="title">Title</label>
                    <input type="text" "#title"/>
                </div>

                <div>
                    <label for="body">Body</label>
                    <input type="text" "#body"/>
                </div>

                <div>
                    <input type="submit" value="Create text"/>
                </div>
            </form>
        </div>
    </div>
</section>

CSS：

.jumbotron{
    background: red;
    padding: 0;
    margin: 0;
}
.header-container{
    min-height: 325px;
    background: #ffd106;
    background: url(../img/city.jpg);
    border-top:1px solid #252525;
}

.menu{
    list-style-type: none;
}

.menu li a{
    color:#252525;
    float:left;
    font-size:11px;
    padding:1px 10px;
}

.logo{
    padding:10px;
}

.search-bar{
    width:80%;
    background: none repeat scroll 0% 0% #252525;
    border-radius: 3px;
    box-shadow: 1px 1px 1px #545454;
    padding:5px 4px;
    color:#efefef;
    font-weight: normal;
}
.search-bar div{
    float:left;
    margin-left: 10px;
}
.search-bar div input{
    border:1px solid #CCC;
    padding:4px;
    margin-left:10px;
}

关于html - 在 bootstrap 中将行对齐到相同位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23443464/