Элементы позиции внутри заголовка ботстрапа-заголовка

Question

С помощью бутстрапа можно горизонтально выровнять компоненты внутри панели? Чтобы иметь: title: выровненный по левому краю, btn1: centered, btn2: выравнивается вправо.

<div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">title</h3> 

      <button class="btn">btn1</button> 

      <button class="btn">btn2</button> 
     </div> 

     <div class="panel-body"> 
      text 
     </div> 
    </div> 
</div> 

Я попытался создать класс начальной загрузки «строки» и столбцы, но строка выходит за пределы панели-заголовка, так как панель находится внутри другого Col-мд-6:

Answer 1

А справа путь с .row и .col, как это

<div class="panel panel-default container-fluid"> 
    <div class="panel-heading row"> 
     <div class="col-xs-4"><h3 class="panel-title">title</h3></div> 
     <div class="col-xs-4 text-center"><button class="btn">btn1</button></div> 
     <div class="col-xs-4"><button class="btn pull-right">btn2</button></div> 
    </div> 
    <div class="panel-body"> 
     text 
    </div> 
</div> 

http://jsfiddle.net/j7u53eav/3

Answer 2

Используя ответ Ch.Idea в качестве плацдарма, вы можете добавить класс строк в ваш panel-heading. Однако вам не нужно делать панель container-fluid.

Поскольку класс Bootstrap row добавляет отрицательные поля, вам просто нужно их удалить. Предполагая, что каждый раз, когда row добавляется к panel-heading вы хотели бы такое поведение, это так просто, как добавить некоторые CSS:

.panel-heading.row { 
    margin: 0 
} 

Поскольку столбцы уже есть отступы, вы можете принять его дальше, удалив левую и правую от грести, а также:

.panel-heading.row { 
    margin: 0; 
    padding-left: 0; 
    padding-right: 0; 
} 

И ради тщательности, модифицированная копия работы Ch.Idea в:

<div class="panel panel-default"> 
    <div class="panel-heading row"> 
     <div class="col-xs-4"><h3 class="panel-title">title</h3></div> 
     <div class="col-xs-4 text-center"><button class="btn">btn1</button></div> 
     <div class="col-xs-4"><button class="btn pull-right">btn2</button></div> 
    </div> 
    <div class="panel-body"> 
     text 
    </div> 
    <table class="table"> 
     <!-- insert rest of table here --> 
    </table> 
</div> 

И модифицированный jsfi ddle показывая полную ширину таблицы:

http://jsfiddle.net/my7axd1b/3/