Я бы начал с добавления 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
.panel-title
из,<h4>
и прокладка вам не понадобится.Я немного опоздал с игрой, но простой ответ - переместить H4 ПОСЛЕ кнопки div. Это распространенная проблема при перемещении, всегда определяйте свои плавающие элементы ДО остального содержимого, иначе у вас возникнет дополнительная проблема с разрывом строки.
Проблема здесь в том, что когда ваши поплавки определены после других элементов, верхняя часть поплавка будет начинаться с последней строчной позиции элемента непосредственно перед ним. Итак, если предыдущий элемент переносится на строку 3, ваш float также начнется со строки 3.
Перемещение поплавка в верхнюю часть списка устраняет проблему, потому что нет предыдущих элементов, которые могли бы подтолкнуть его вниз, и все, что после поплавка будет отображаться в верхней строке (при условии, что в строке есть место для всех элементов)
Пример правильного и неправильного порядка и эффектов: http://www.bootply.com/HkDlNIKv9g
источник
Вы должны применить «clearfix», чтобы очистить родительский элемент. Далее, h4 для заголовка заголовка простирается на весь заголовок, поэтому после применения clearfix он подтолкнет дочерний элемент, в результате чего div заголовка будет иметь большую высоту.
Вот исправление, просто замените его своим кодом.
Отредактировано 22.12.2015 - добавлено .clearfix в заголовок div
источник
Я поместил группу кнопок в заголовок, а затем добавил clearfix внизу.
источник
Попробуйте поместить
btn-group
внутрь вотH4
так ..http://bootply.com/lpXoMPup2d
источник
Вы частично правы. с
<b>title</b>
ним выглядит нормально, но хотелось бы использовать<h4>
.Я положил
<h4 style="display: inline;">
и швы заработать.Теперь мне нужно только добавить вертикальное выравнивание.
источник
inline-block
лучше.В этом случае вам следует добавить
.clearfix
в конец контейнера с плавающими элементами.http://www.bootply.com/NCXkOtIkD6
источник
Я обнаружил, что использование дополнительного класса в заголовке .panel помогает.
А затем используя этот меньший код:
источник
h4
Элемент отображается в виде блока. Добавьте к нему границу, и вы увидите, что происходит. Если вы хотите разместить что-то справа от него, у вас есть несколько вариантов:В любом случае вы должны добавить
clearfix
класс к элементу контейнера, чтобы получить правильные отступы для ваших кнопок.Вы также можете добавить
panel-title
класс к элементу h4 или настроить отступы на нем.источник
или это? Используя класс строки
источник