Question

我正在尝试创建页眉/工具栏。这在现有主题中，顶部有一个DIV。基本前提是在左边是一个H2标题，然后在右边是一堆引导元素（搜索表单，句子，下拉等。

我已经尝试了各种块，内联块垂直对齐等。我可以让H2向左拉，工具栏向右拉，但工具栏元素都拉到容器div的顶部。我只想要一个整洁的布局，所有元素沿着它们的水平轴对齐。

我认为右倾可能是问题的一部分。这似乎把正确的div拉到了顶端。

以下是Bootply链接：http://www.bootply.com/BPucyP8mpk

<div class"container">    
<div id="left">
      <h2 class="">Title</h2>

</div>

<div id="right">
  <form class="form form-horizontal">
    <input type="text" placeholder="search field" class="form-control">
    <button type="submit" class="btn">search</button>
  </form>
  <button class="btn btn-default">Button</button>
  <div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
  </div>
  <div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#" class="">Choice1</a>
      </li>
      <li><a href="#" class="">Choice2</a>
      </li>
      <li><a href="#" class="">Choice3</a>
      </li>
      <li class="divider"></li>
      <li><a href="#" class="">Choice..</a>


     </li>
        </ul>
      </div>
    </div>
</div>

更新

这是包装我正在尝试格式化的标题的计算CSS：

border-bottom-width: 1px;
border-top-color: rgb(103, 106, 108);
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(103, 106, 108);
display: block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
height: 70px;
line-height: 18px;
margin-left: -15px;
margin-right: -15px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
padding-top: 0px;
width: 1318px;

这是我安装的自定义主题。这是来自此包装器div的计算CSS：

 <div class="row wrapper border-bottom white-bg page-heading">
 </div>

Answer 1

UPD：

此任务最合适的方法是使用Flexbox

检查出来：http://www.bootply.com/CtVmUbzrlr

<div class="row">
  <div id="left" class="col-sm-3 col-md-5">
      <h2 class="">Title</h2>
    </div>

 <div id="right" class="col-sm-9 col-md-7">


   <form class="form form-horizontal">
     <div class="input-group">
       <input type="text" placeholder="search field" class="form-control">
       <span type="submit" class="input-group-addon">search</span>
     </div>
   </form>

   <button class="btn btn-default">Button</button>

   <div class="btn-group">
     <button class="btn">Left</button>
     <button class="btn">Middle</button>
     <button class="btn">Right</button>
   </div>

   <div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
     <ul class="dropdown-menu">
       <li><a href="#" class="">Choice1</a>
       </li>
       <li><a href="#" class="">Choice2</a>
       </li>
       <li><a href="#" class="">Choice3</a>
       </li>
       <li class="divider"></li>
       <li><a href="#" class="">Choice..</a>
       </li>
     </ul>
   </div>

</div>

  </div>

.row{
border: 1px solid #000;
}

#right{
  display: flex;
  align-items: center;
  height: 66px;
  justify-content: flex-end;
}

.input-group{
width: 200px;
}

Answer 2

检查出来：

<div class="col-lg-4">
  <h2 class="">Title</h2>
</div>

<div class="col-lg-8">
  <div class="row">
<form class="form form-horizontal">
    <div class="col-lg-8">
    <input type="text" placeholder="search field" class="form-control">
  </div>
    <div class="col-lg-4">
    <button type="submit" class="btn btn-block">search</button>
  </div>
</form>
  </div>
  <div class="row">
    <div class="col-lg-12">
<button class="btn btn-default">Button</button>
<div class="btn-group">
    <button class="btn">Left</button>
    <button class="btn">Middle</button>
    <button class="btn">Right</button>
</div>
<div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#" class="">Choice1</a>
        </li>
        <li><a href="#" class="">Choice2</a>
        </li>
        <li><a href="#" class="">Choice3</a>
        </li>
        <li class="divider"></li>
        <li><a href="#" class="">Choice..</a>
        </li>
        </ul>
      </div>
</div>
</div>
</div>

你也可以检查bootply：http://www.bootply.com/LmGjZM6fHH
您需要使用col-md- *
来管理您的布局这只是演示，你可以用自己的方式安排

Answer 3

如何使用bootstrap中的navbar组件？ http://getbootstrap.com/components/#navbar 我认为这里的例子几乎总结了你的需求。

基本上我已将类navbar-btn添加到按钮，并navbar-form添加到表单以使它们正确对齐。我将类navbar-right添加到表单和按钮组中。 http://www.bootply.com/IySnkX2ioK

编辑：刚添加navbar-default类来概述导航栏的边界，而不是解决方案的一部分。

Answer 4

首先，如果你想让你的搜索框在左边 - 首先放置它，然后用下拉列表按钮组。其次，不要将navbar-rigth放在另一个navbar-rigth内。最后一件事 - 只需将您的右侧元素包装在一个div中并添加一点padding

更新了link

使用Bootstrap元素的工具栏的水平和垂直对齐方式

4 个答案: