Расположить компоненты внутри заголовка ботстрапа

С помощью бутстрапа можно горизонтально выровнять компоненты внутри панели? Чтобы иметь: заголовок: выровненный по левому краю, 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-md-6: result of using columns

Ответы

Ответ 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

Ответ 2

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

Так как класс Bootstrap row добавляет отрицательные поля, вам просто нужно их удалить. Предполагая, что каждый раз, когда a 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>

И измененный jsfiddle, показывающий таблицы полной ширины:

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