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

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

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

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

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

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

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

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

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

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

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