如何将导航栏中的搜索表单与 bootstrap 网格对齐？

Question

我在基于 bootstrap 3 的网络应用程序中有一个导航栏搜索表单。我希望搜索表单与网格的第 4 列对齐（col-md-offset-3，如果导航包裹在容器中），因为正文与该列对齐。

我试过使用容器和容器流体 div 的形式具有 class col-md-offset-3，并且还更改了品牌列的宽度和偏移量，但是没有对齐。

截图如下（红线是我要对齐的竖线）：

这是生成此屏幕截图的标记：

<body>
  <nav role="navigation" class='navbar'>
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand col-md-3" href='#'>
            My&nbsp;App
          </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

          <ul class="nav navbar-nav">
                <form accept-charset="UTF-8" class="navbar-form col-md-6" role="search">
                <input class="form-control search-text-field" id="q" name="q" placeholder="Search" type="text" />
                <input class="btn btn-default search-go-button" name="commit" type="submit" value="Go" />   
              </form>            
          </ul>
        </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
  </nav>
  <div class='row'>
    <div class='col-md-offset-3 col-md-6'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elementum odio, vel malesuada felis. Mauris fringilla arcu ex, non porta sem rutrum non. Phasellus varius urna sit amet venenatis vulputate. Ut eget nunc sodales, scelerisque est et, ullamcorper mi. Nunc maximus id nisi eget pellentesque. Sed imperdiet nulla quis magna ornare ornare. Aenean condimentum tortor odio, a fringilla nisi cursus a.
    </div>
  </div>
</body>

Answer 1

当您将 "container" class 放入您的导航栏时，您也需要将它放入您的内容中，或者您需要使用 javascript 使它们排成一行向上：

<div class="container">
    <div class='row'>
        <div class='col-md-offset-3 col-md-6'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac elementum odio, vel malesuada felis. Mauris fringilla arcu ex, non porta sem rutrum non. Phasellus varius urna sit amet venenatis vulputate. Ut eget nunc sodales, scelerisque est et, ullamcorper mi. Nunc maximus id nisi eget pellentesque. Sed imperdiet nulla quis magna ornare ornare. Aenean condimentum tortor odio, a fringilla nisi cursus a.
        </div>
    </div>
</div>

之后你可以改变你的 "navbar-header" 以适应 "col-md-offset-3" 是 25% 像这样：

.navbar-header {
    width: 25%;
}

这会将搜索推到右侧，以便与您的内容对齐。

工作示例： http://jsfiddle.net/ztkd3njx/1/

如何将导航栏中的搜索表单与 bootstrap 网格对齐？

How to align search form in navbar with bootstrap grid?

css

twitter-bootstrap