Bootstrap 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 นี่เป็นปัญหาที่พบบ่อยเมื่อลอยตัวให้กำหนดลอยก่อนส่วนที่เหลือของเนื้อหาเสมอมิฉะนั้นคุณจะมีปัญหาการแบ่งบรรทัดเพิ่มเติม

<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 การลอยตัวของคุณจะเริ่มต้นที่บรรทัดที่ 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/2558 - เพิ่ม .clearfix ในหัวเรื่อง div

ฉันวางกลุ่มปุ่มไว้ในชื่อเรื่องจากนั้นเพิ่ม clearfix ที่ด้านล่าง

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

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