Заголовок панелі завантаження 3 з неправильним положенням кнопок

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

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

Які відсутні CSS, які я повинен додати або до заголовка, заголовка панелі чи кнопок?

Я хотів би почати з додавання 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 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

Я розмістив групу кнопок всередині заголовка, а потім додав чітке виправлення в нижній частині.

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