Заголовок панели Bootstrap 3 с неправильным расположением кнопок

Я использую Bootstrap 3 и хочу добавить несколько кнопок в заголовок панели в правом верхнем углу. Когда вы пытаетесь добавить их, они отображаются под базовой линией заголовка.

Код: http://bootply.com/82631

Какие недостающие CSS я должен добавить в заголовок, заголовок панели или кнопки?

Я бы начал с добавления clearfixкласса к классу <div>with panel-heading. Затем добавьте оба panel-titleи pull-leftк H4тегу. Затем padding-topпри необходимости добавьте .

Вот полный код:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
      <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
    </div>
    ...
</div>

http://bootply.com/98827

Я немного опоздал с игрой, но простой ответ - переместить H4 ПОСЛЕ кнопки div. Это распространенная проблема при перемещении, всегда определяйте свои плавающие элементы ДО остального содержимого, иначе у вас возникнет дополнительная проблема с разрывом строки.

<div class="panel-heading">
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <h4>Panel header</h4>
</div>

Проблема здесь в том, что когда ваши поплавки определены после других элементов, верхняя часть поплавка будет начинаться с последней строчной позиции элемента непосредственно перед ним. Итак, если предыдущий элемент переносится на строку 3, ваш float также начнется со строки 3.

Перемещение поплавка в верхнюю часть списка устраняет проблему, потому что нет предыдущих элементов, которые могли бы подтолкнуть его вниз, и все, что после поплавка будет отображаться в верхней строке (при условии, что в строке есть место для всех элементов)

Пример правильного и неправильного порядка и эффектов: http://www.bootply.com/HkDlNIKv9g

Вы должны применить «clearfix», чтобы очистить родительский элемент. Далее, h4 для заголовка заголовка простирается на весь заголовок, поэтому после применения clearfix он подтолкнет дочерний элемент, в результате чего div заголовка будет иметь большую высоту.

Вот исправление, просто замените его своим кодом.

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

Отредактировано 22.12.2015 - добавлено .clearfix в заголовок div

Я поместил группу кнопок в заголовок, а затем добавил clearfix внизу.

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>

Попробуйте поместить btn-groupвнутрь вот H4так ..

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

Вы частично правы. с <b>title</b>ним выглядит нормально, но хотелось бы использовать <h4>.

Я положил <h4 style="display: inline;">и швы заработать.

Теперь мне нужно только добавить вертикальное выравнивание.

В этом случае вам следует добавить .clearfixв конец контейнера с плавающими элементами.

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

Я обнаружил, что использование дополнительного класса в заголовке .panel помогает.

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

А затем используя этот меньший код:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

h4Элемент отображается в виде блока. Добавьте к нему границу, и вы увидите, что происходит. Если вы хотите разместить что-то справа от него, у вас есть несколько вариантов:

1. Поместите плавающие элементы перед элементом блока (h4).
2. Также разместите элемент h4.
3. Отобразите элемент h4 встроенным.

В любом случае вы должны добавить clearfixкласс к элементу контейнера, чтобы получить правильные отступы для ваших кнопок.

Вы также можете добавить panel-titleкласс к элементу h4 или настроить отступы на нем.

или это? Используя класс строки

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>