使用Bootstrap元素的工具欄的水平和垂直對齊

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> 

UPDATE：

這裏是計算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

怎麼樣從引導利用導航欄組件？ 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