it-swarm.com.ru

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

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

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

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

116
Dede

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

169
OregonJeff

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

151
getsaf

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

41
andre3wap

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

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

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

8
Zim

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

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

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

6
Dede

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

6
sargonpiraev

Я обнаружил использование дополнительного класса для подсказок .panel-heading.

<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;
    }
}
1
Jon Joyce

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

  <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>
0
Kanit P.

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

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

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

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

0
mrdeus