3 panelowy nagłówek Bootstrap z niewłaściwym położeniem przycisków

Używam Bootstrap 3 i chciałbym dodać kilka przycisków w nagłówku panelu, w prawym górnym rogu. Przy próbie ich dodania są one wyświetlane poniżej linii bazowej tytułu.

Kod: http://bootply.com/82631

Jaki jest brakujący kod CSS, który powinienem dodać do tytułu, nagłówka panelu lub przycisków?

Zacząłbym od dodania clearfixclass do <div>with panel-headingclass. Następnie dodaj oba panel-titlei pull-leftdo H4tagu. Następnie dodaj padding-top, jeśli to konieczne.

Oto pełny kod:

<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

Jestem trochę spóźniony do gry, ale prostą odpowiedzią jest przesunięcie H4 PO DIV przycisku. Jest to częsty problem podczas pływania, zawsze miej zdefiniowane elementy zmiennoprzecinkowe PRZED pozostałą zawartością lub będziesz mieć dodatkowy problem z łamaniem linii.

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

Problem polega na tym, że kiedy twoje elementy zmiennoprzecinkowe są zdefiniowane po innych elementach, wierzchołek elementu zmiennoprzecinkowego zacznie się od ostatniej pozycji w wierszu elementu bezpośrednio przed nim. Tak więc, jeśli poprzedni element zawija się do linii 3, twój ruch zmienny również rozpocznie się w linii 3.

Przeniesienie pływaka na górę listy eliminuje problem, ponieważ nie ma żadnych poprzednich elementów, które mogłyby ją przesunąć, a wszystko, co znajduje się po pływającym, zostanie wyrenderowane w górnej linii (zakładając, że w wierszu jest miejsce na wszystkie elementy)

Przykład prawidłowego i nieprawidłowego zamawiania oraz efektów: http://www.bootply.com/HkDlNIKv9g

Powinieneś zastosować „clearfix”, aby wyczyścić element nadrzędny. Następnie h4 dla tytułu nagłówka, rozciąga się na całą szerokość nagłówka, więc po zastosowaniu clearfix, przesunie on element potomny, powodując, że div nagłówka będzie miał większą wysokość.

Oto poprawka, po prostu zastąp ją swoim kodem.

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

Zmieniono 22.12.2015 - dodano .clearfix do nagłówka div

Umieściłem grupę przycisków w tytule, a następnie dodałem poprawkę na dole.

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

Spróbuj umieścić btn-groupwnętrze w H4ten sposób ..

<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

Po części masz rację. z <b>title</b>tym wygląda dobrze, ale chciałbym użyć <h4>.

Włożyłem <h4 style="display: inline;">i wydaje się działać.

Teraz muszę tylko dodać wyrównanie pionowe.

W takim przypadku należy dodać .clearfixna końcu kontenera z elementami pływającymi.

<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

Znalazłem użycie dodatkowej klasy w nagłówku .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>

A potem używając tego mniej kodu:

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

h4Element jest wyświetlany w postaci bloku. Dodaj do niego obramowanie, a zobaczysz, co się dzieje. Jeśli chcesz przesunąć coś po prawej stronie, masz kilka opcji:

1. Umieść elementy pływające przed elementem block (h4).
2. Przenieś również element h4.
3. Wyświetl element h4 w tekście.

W obu przypadkach należy dodać clearfixklasę do elementu kontenera, aby uzyskać prawidłowe wypełnienie przycisków.

Możesz także dodać panel-titleklasę do elementu h4 lub dostosować dopełnienie.

albo to? Używając klasy row

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