Горизонтальное и вертикальное выравнивание панели инструментов с элементами Bootstrap

Question

Я пытаюсь создать заголовок страницы/панель инструментов. Это в существующей теме, и там есть DIV наверху, где это будет. Основная посылка слева - название H2, а справа - куча элементов бутстрапа (форма поиска, блокировки, выпадающие списки и т. Д.)

Я пробовал все виды блоков, вертикальные вертикальные вырезы и т. Д. Я могу получить H2, чтобы вытащить левый и панель инструментов, чтобы потянуть вправо, но элементы панели инструментов подтянутся к верхней части контейнера 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; 

Это из моей пользовательской темы я установил. Это вычисленное CSS с этой обертки DIV:

<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-right как в форму, так и в группу кнопок. http://www.bootply.com/IySnkX2ioK

Редактировать: Класс navbar-default был просто добавлен, чтобы очертить границы навигатора, а не часть решения.

Answer 4

Прежде всего, если вы хотите, чтобы окно поиска слева - поместите его сначала, а затем группу кнопок с выпадающим списком. Во-вторых, не размещайте navbar-rigth внутри другого navbar-rigth.И последняя вещь - просто обернуть правой стороне элементов в одном div и добавить к нему немного padding

Обновлено link