具有Bootstrap元素的工具栏的水平和垂直对齐

Question

我正在尝试创建页面标题/工具栏。 这是现有主题，顶部将放置DIV。 基本前提是，左边是H2标题，右边是一堆引导元素（搜索表单，botton，下拉列表等）。

我已经尝试了所有类型的块，内联块垂直对齐等。我可以使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

如何利用引导程序中的navbar组件？ http://getbootstrap.com/components/#navbar我认为这里的示例几乎可以总结您的需求。

基本上，我在按钮上添加了navbar-btn类，在navbar-form添加了navbar-form ，以使它们正确对齐。 我在窗体和按钮组中都添加了navbar-right类。 http://www.bootply.com/IySnkX2ioK

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

Answer 4

第一件事是，如果您想将搜索框放在左侧，请先将其放置，然后再将按钮组与下拉列表放在一起。 其次，不要将navbar-rigth放置在另一个navbar-rigth 。 最后一件事-只需将右侧元素包装在一个div并在其中添加一些padding

更新的链接