Header panel bootstrap 3 dengan posisi tombol salah

Saya menggunakan Bootstrap 3 dan saya ingin menambahkan beberapa tombol di header panel, di pojok kanan atas. Saat mencoba menambahkannya, mereka ditampilkan di bawah garis dasar judul.

Kode: http://bootply.com/82631

Apa CSS yang hilang yang harus saya tambahkan ke judul, judul panel, atau tombol?

Saya akan mulai dengan menambahkan clearfixkelas ke kelas <div>with panel-heading. Lalu, tambahkan keduanya panel-titledan pull-leftke H4tag. Lalu, tambahkan padding-topjika perlu.

Berikut kode lengkapnya:

<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

Saya agak terlambat untuk permainan di sini, tetapi jawaban sederhananya adalah dengan memindahkan H4 SETELAH tombol div. Ini adalah masalah umum saat mengambang, selalu atur float Anda SEBELUM konten lainnya atau Anda akan memiliki masalah jeda baris tambahan.

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

Masalahnya di sini adalah ketika float Anda ditentukan setelah item lain, bagian atas float akan dimulai dari posisi baris terakhir elemen tepat sebelum itu. Jadi, jika item sebelumnya digabungkan ke baris 3, float Anda akan dimulai di baris 3 juga.

Memindahkan pelampung ke TOP dari daftar menghilangkan masalah karena tidak ada elemen sebelumnya yang mendorongnya ke bawah dan apa pun setelah pelampung akan ditampilkan di baris atas (dengan asumsi ada ruang di baris untuk semua item)

Contoh pemesanan yang benar dan salah serta efeknya: http://www.bootply.com/HkDlNIKv9g

Anda harus menerapkan "clearfix" untuk menghapus elemen induk. Selanjutnya, h4 untuk judul header, meluas ke seluruh header, jadi setelah Anda menerapkan clearfix, ini akan menekan elemen anak yang menyebabkan div header memiliki ketinggian yang lebih besar.

Ini perbaikannya, cukup ganti dengan kode Anda.

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

Diedit pada 12/22/2015 - menambahkan .clearfix ke heading div

Saya menempatkan grup tombol di dalam judul, dan kemudian menambahkan clearfix ke bawah.

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

Coba letakkan bagian btn-groupdalam H4seperti ini ..

<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

Anda bagian yang benar. dengan <b>title</b>itu terlihat baik-baik saja, tapi saya ingin menggunakan <h4>.

Saya telah menempatkan <h4 style="display: inline;">dan jahitan untuk bekerja.

Sekarang, saya hanya perlu menambahkan beberapa vertival align.

Dalam hal ini Anda harus menambahkan .clearfixdi akhir wadah dengan elemen mengambang.

<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

Saya telah menemukan menggunakan kelas tambahan pada bantuan .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>

Dan kemudian gunakan lebih sedikit kode ini:

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

The h4elemen ditampilkan sebagai blok. Tambahkan batas ke sana dan Anda akan melihat apa yang terjadi. Jika Anda ingin mengapungkan sesuatu di sebelah kanannya, Anda memiliki sejumlah pilihan:

1. Tempatkan item mengambang sebelum elemen blok (h4).
2. Apung juga elemen h4.
3. Tampilkan elemen h4 sebaris.

Dalam kedua kasus tersebut, Anda harus menambahkan clearfixkelas ke elemen kontainer untuk mendapatkan bantalan yang benar untuk tombol Anda.

Anda mungkin juga ingin menambahkan panel-titlekelas ke, atau menyesuaikan padding, elemen h4.

atau ini? Dengan menggunakan kelas baris

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