Tiêu đề bảng điều khiển Bootstrap 3 với các nút sai vị trí

Tôi đang sử dụng Bootstrap 3 và tôi muốn thêm một số nút trong tiêu đề bảng điều khiển, ở góc trên bên phải. Khi cố gắng thêm chúng, chúng sẽ hiển thị bên dưới đường cơ sở tiêu đề.

Mã: http://bootply.com/82631

CSS còn thiếu mà tôi nên thêm vào tiêu đề, tiêu đề bảng điều khiển hoặc các nút là gì?

Tôi sẽ bắt đầu bằng cách thêm clearfixlớp vào lớp <div>với panel-heading. Sau đó, thêm cả hai panel-titlevà pull-leftvào H4thẻ. Sau đó, thêm padding-top, nếu cần.

Đây là mã hoàn chỉnh:

<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

Tôi hơi trễ trò chơi ở đây, nhưng câu trả lời đơn giản là di chuyển H4 SAU nút div. Đây là một vấn đề phổ biến khi thả nổi, hãy luôn xác định số nổi của bạn TRƯỚC phần còn lại của nội dung, nếu không bạn sẽ gặp phải vấn đề ngắt dòng bổ sung đó.

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

Vấn đề ở đây là khi float của bạn được xác định sau các mục khác, phần trên của float sẽ bắt đầu ở vị trí dòng cuối cùng của phần tử ngay trước nó. Vì vậy, nếu mục trước đó kết thúc ở dòng 3, float của bạn cũng sẽ bắt đầu ở dòng 3.

Di chuyển phao lên đầu danh sách sẽ loại bỏ vấn đề vì không có phần tử nào trước đó để đẩy nó xuống và bất kỳ thứ gì sau phao sẽ được hiển thị ở dòng trên cùng (giả sử có chỗ trên dòng cho tất cả các mục)

Ví dụ về thứ tự đúng và sai và các hiệu ứng: http://www.bootply.com/HkDlNIKv9g

Bạn nên áp dụng một "tiền tố rõ ràng" để xóa phần tử mẹ. Điều tiếp theo, h4 cho tiêu đề tiêu đề, mở rộng toàn bộ tiêu đề, vì vậy sau khi bạn áp dụng clearfix, nó sẽ đẩy phần tử con xuống khiến div tiêu đề có chiều cao lớn hơn.

Đây là một bản sửa lỗi, chỉ cần thay thế nó bằng mã của bạn.

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

Đã chỉnh sửa vào ngày 22/12/2015 - đã thêm .clearfix vào tiêu đề div

Tôi đã đặt nhóm nút bên trong tiêu đề, sau đó thêm một tiền tố rõ ràng vào dưới cùng.

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

Hãy thử đặt btn-groupbên trong H4như thế này ..

<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ạn là một phần đúng. với <b>title</b>nó trông ổn, nhưng tôi muốn sử dụng <h4>.

Tôi đã đặt <h4 style="display: inline;">và nó nối để làm việc.

Bây giờ, tôi chỉ cần thêm một số căn chỉnh thẳng đứng.

Trong trường hợp này, bạn nên thêm .clearfixvào cuối vùng chứa các phần tử nổi.

<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

Tôi đã tìm thấy việc sử dụng một lớp bổ sung trên tiêu đề .panel giúp ích.

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

Và sau đó sử dụng mã ít hơn này:

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

Phần h4tử được hiển thị dưới dạng một khối. Thêm một đường viền cho nó và bạn sẽ thấy những gì đang xảy ra. Nếu bạn muốn thả nổi thứ gì đó sang bên phải của nó, bạn có một số tùy chọn:

1. Đặt các mục nổi trước phần tử khối (h4).
2. Làm nổi phần tử h4.
3. Hiển thị nội dòng phần tử h4.

Trong cả hai trường hợp, bạn nên thêm clearfix lớp vào phần tử vùng chứa để có được phần đệm chính xác cho các nút của bạn.

Bạn cũng có thể muốn thêm panel-titlelớp vào hoặc điều chỉnh phần đệm trên phần tử h4.

hay cái này? Bằng cách sử dụng lớp hàng

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