Расположение компонентов внутри панели bootstrap-заголовок

используя bootstrap, как можно горизонтально выровнять компоненты в заголовке панели? Чтобы иметь: название: выровнено слева, btn1: центрировано, 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

10
css html twitter-bootstrap

2 ответов

правильный путь .ряд и. 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

26

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

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

.panel-heading.row {
  margin: 0
}

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

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

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

<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/

3