Question

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

enter image description here

我知道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;
}

Answer 1

您的布局存在一些问题：

您正在定义列宽和偏移量大于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;
}

Answer 2

您的代码存在很多问题。

您尚未将列包裹起来
您使用col-md-12，偏移量为2，最多为14
您有一个嵌套在另一个容器中的容器
您没有在最后一个div上使用偏移量，因此它永远不会对齐

以下是改变这些内容的代码。

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

                <div class="search-bar col-md-10 col-md-offset-2"> 

                {{ 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>
          </div>
    </section>

将行对齐到引导程序中的相同位置

2 个答案: