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

Ответ 1

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

Ответ 2

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

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

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

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

Ответ 3

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

Отредактировано 12/22/2015 - добавлено .clearfix в заголовок div

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Я нашел использование дополнительного класса в заголовке .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;
    }
}

Ответ 9

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

• Поместите перемещенные элементы перед элементом блока (h4).
• Поплавьте элемент h4.
• Отобразить встроенный элемент h4.

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

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

Ответ 10

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

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