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

117

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

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

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

Деде
источник

Ответы:

175

Я бы начал с добавления 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

OregonJeff
источник
Это работает, единственная проблема заключается в том, что заголовок панели вытягивается в верхнюю часть div, а btn-group вертикально выравнивается
Нуно Фуртадо
9
Или просто удалите .panel-titleиз, <h4>и прокладка вам не понадобится.
caw
153

Я немного опоздал с игрой, но простой ответ - переместить 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

getsaf
источник
Если вам не нравится размер h4, используйте <h4> <small> Заголовок панели </small> </h4>
Лучано Маркето, 09
Я не могу понять, почему моя кнопка не помещается внутри заголовка панели. Кнопка нажимается вниз за счет заполнения заголовка панели и не увеличивает высоту заголовка панели. Что я делаю не так? (Правка: очевидно, это произошло из-за добавления класса к h4 ... но все же заголовок слишком высокий.)
Нейт
1
Мне пришлось добавить clearfix в заголовок панели и добавить отступы, как в приведенном выше ответе. Можете сделать рабочий образец / демку?
Nate
2
Нейт, вот пример правильного и неправильного порядка. bootply.com/HkDlNIKv9g
getsaf
1
Я думаю, что следует заменить класс btn-sm на btn-xs. Он подходит лучше
IlGala
40

Вы должны применить «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

andre3wap
источник
3
должно работать, если вы добавите класс clearfix в заголовок панели вместо добавления еще одного пустого div
escapedcat
10

Я поместил группу кнопок в заголовок, а затем добавил 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>
Джонатан
источник
1
более элегантно: <div class = "panel-heading clearfix">;)
Марвен Трабелси
8

Попробуйте поместить 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

Zim
источник
Нет, это не «хорошая практика», но он ответил на исходный вопрос. Я обновляю ответ в соответствии с передовой практикой.
Zim
6

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

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

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

Деде
источник
1
inline-blockлучше.
Dede
6

В этом случае вам следует добавить .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

sargonpiraev
источник
1

Я обнаружил, что использование дополнительного класса в заголовке .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;
    }
}
Джон Джойс
источник
0

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

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

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

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

mrdeus
источник
0

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

  <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>
Канит П.
источник