Bootstrap 3 panel başlığı, düğmeleri yanlış konumda

Bootstrap 3 kullanıyorum ve sağ üst köşedeki panel başlığına bazı düğmeler eklemek istiyorum. Bunları eklemeye çalışırken, başlık taban çizgisinin altında gösterilirler.

Kodu: http://bootply.com/82631

Başlığa, panel başlığına veya düğmelere eklemem gereken eksik CSS nedir?

Ben ekleyerek başlayacağı clearfixiçin sınıf <div>ile panel-headingsınıfında. Sonra, her iki ekleme panel-titleve pull-leftiçin H4etiketi. Ardından padding-topgerektiği gibi ekleyin.

İşte tam 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

Burada oyuna biraz geç kaldım, ancak basit cevap H4'ü div düğmesinden SONRA hareket ettirmek. Bu, yüzer durumdayken yaygın bir sorundur, yüzen sayılarınızı her zaman içeriğin geri kalanından ÖNCE tanımlayın, aksi takdirde fazladan satır sonu problemi yaşarsınız.

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

Buradaki sorun şudur ki, yüzen öğeleriniz diğer öğelerden sonra tanımlandığında, kayan reklamın tepesi öğenin hemen önündeki son satır konumunda başlayacaktır. Dolayısıyla, önceki öğe 3. satıra kaydırılırsa, kayan noktanız da 3. satırdan başlayacaktır.

Şamandırayı listenin BAŞına taşımak sorunu ortadan kaldırır, çünkü onu aşağı itecek herhangi bir öğe yoktur ve kayan noktadan sonraki her şey en üst satırda işlenir (satırda tüm öğeler için yer olduğu varsayılarak)

Doğru ve yanlış sıralama örneği ve etkileri: http://www.bootply.com/HkDlNIKv9g

Ana öğeyi temizlemek için bir "düzeltme" uygulamalısınız. Sonraki şey, üstbilgi başlığı için h4, üstbilgi boyunca tüm yol boyunca uzanır, böylece clearfix'i uyguladıktan sonra, alt öğeyi aşağı iterek başlık div'in daha büyük bir yüksekliğe sahip olmasına neden olur.

İşte bir düzeltme, sadece kodunuzla değiştirin.

  <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 tarihinde düzenlendi - başlık div'e .clearfix eklendi

Düğme grubunu başlığın içine yerleştirdim ve ardından alt kısma bir düzeltme ekledim.

<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İçini H4böyle koymayı dene ..

<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

Kısmen haklısın. onunla <b>title</b>iyi görünüyor, ama kullanmak istiyorum <h4>.

Ben koydum <h4 style="display: inline;">ve işe yarıyor.

Şimdi, sadece biraz dikey hizalama eklemem gerekiyor.

Bu durumda .clearfix, yüzen elemanların bulunduğu kabın sonuna eklemelisiniz .

<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 başlığında ek bir sınıf kullanmanın yardımcı olduğunu buldum.

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

Ve sonra bu daha az kodu kullanarak:

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

h4Eleman bir blok olarak gösterilir. Bir sınır ekleyin ve neler olduğunu göreceksiniz. Bir şeyi sağına kaydırmak istiyorsanız, bir dizi seçeneğiniz vardır:

1. Yüzen öğeleri blok (h4) öğesinin önüne yerleştirin.
2. H4 öğesini de kaydırın.
3. H4 öğesini satır içi olarak görüntüleyin.

Her iki durumda da, clearfixdüğmeleriniz için doğru dolguyu almak için sınıfı kapsayıcı öğesine eklemelisiniz .

panel-titleSınıfı h4 öğesine eklemek veya üzerindeki dolguyu ayarlamak da isteyebilirsiniz .

veya bu? Satır sınıfını kullanarak

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