nhóm nút bootstrap 3 trong bảng điều khiển-tiêu đề không tập trung

Question

Tôi có nhóm nút trong tiêu đề bảng điều khiển. Tôi muốn chúng trôi nổi ở bên phải, nhưng khi tôi làm điều này, các nút hiện đang nằm ở cuối tiêu đề và tôi cần chúng được căn giữa. Làm thế nào để tôi làm điều này?

đây là HTML:

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     Member of the following Units 
     <div class="btn-group btn-group-sm"> 
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
      <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button> 
     </div> 
    </div> 
    <div class="panel-body"> 
     test 
    </div> 
    <div class="panel-footer"> 
     test 
    </div>  
</div> 

và một ví dụ fiddle: http://jsfiddle.net/snowburnt/4ejuK/

Lạ lùng thay, trong môi trường dev linux của tôi trên crom, các nút tự được tập trung đúng nhưng các biểu tượng trong số đó là thấp hơn họ nên, tôi có cảm giác điều này sẽ trả lời cả hai vấn đề này.

Answer 1

1. Bạn nên thêm lớp pull-right để div .btn nhóm của bạn, thay vì quy định cụ thể float: right.

2. Khi bạn thả nổi một phần tử, nó sẽ mất bố cục khối. Nó sẽ không còn "đẩy xuống" dưới cùng của container của nó vì nó không có chiều cao. Bạn có thể khắc phục điều này bằng cách đặt overflow:hidden trên số .panel-heading của mình để cho phép thay đổi kích thước chính xác. Bạn sẽ có thêm đệm đầu vào .panel-heading và tiêu cực đệm đầu vào .btn-group để chứa chiều cao của .btn-group.

tôi chia hai fiddle của bạn: http://jsfiddle.net/Dq5ge/

Answer 2

Bạn phải xóa phao của mình. Có nhiều phương pháp cho việc này như hack clearfix hoặc sử dụng overflow: hidden. Đó là những gì tôi đã làm trong fiddle của bạn. http://jsfiddle.net/4ejuK/2/

.panel-heading { 
    overflow: hidden; 
} 

phần tử gốc sẽ bị thu gọn nếu các con đang lưu hành của chúng không bị xóa.

Answer 3

thêm

.container{ 
line-height:2.2; 
} 

cùng với những gì David đã gợi ý ở trên để có văn bản thực sự ở giữa theo chiều dọc. séc fiddle

Answer 4

Bạn có thể sử dụng một thủ thuật cho rằng;)

... 
    Member of the following Units 
    <div class="btn-group btn-group-sm"> 
     <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
     <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button> 
    </div> 
    <div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div> 
    ... 

Chúc may mắn - SM Mousavi

Answer 5

Tôi đã giải quyết vấn đề này cho bản thân mình hôm nay. All of theseemingly-working đề xuất Tôi tìm thấy có liên quan thiết lập chiều cao của sự vật trong pixel để phù hợp với các nút, và rằng chỉ cần không ngồi ngay với tôi. Tôi muốn căn chỉnh theo chiều dọc độc lập với chiều cao thực tế của chính văn bản bảng điều khiển.

Nếu bạn nhìn vào @ithcy 's câu trả lời, và cắm lên các font-size, bạn gặp rắc rối (demo).

Tôi càng trở nên googling, tôi càng tin chắc rằng CSS của vertical-align là những gì tôi muốn, nhưng dường như nó không làm được những gì tôi nghĩ.Sau đó, tôi chạy ngang qua an article by Louis Lazaris rằng giải thích tốt hơn là những gì vertical-align,

Thuộc tính vertical-align có thể được chia thành ba dễ hiểu bước sau:

1. Nó chỉ áp dụng cho inline hoặc inline-block các yếu tố
2. Nó ảnh hưởng đến sự liên kết của chính phần tử, chứ không phải nội dung của phần tử (trừ khi áp dụng cho ô bảng)
3. Khi nó được áp dụng cho một ô trong bảng, sự liên kết ảnh hưởng đến nội dung di động, không phải là tế bào tự

và quan trọng hơn là không:

Các quan niệm sai lầm phổ biến về vertical-align là khi áp dụng cho một phần tử, nó sẽ tạo tất cả các phần tử bên trong phần tử chan đó ge vị trí thẳng đứng của họ.

Giải pháp của tôi là sử dụng định dạng bảng CSS (đó là vertical-align là để làm gì, sau khi tất cả) thay cho s float rằng Bootstrap cung cấp với pull-left và pull-right. Phải mất thêm một chút đánh dấu cách tôi (ngây thơ) đã làm nó, nhưng tôi đã có kết quả tôi muốn:

HTML

<div class="panel-heading table-style"> 
    <span class="panel-title">Member of...</span> 
    <div class="button-wrap"> 
    <div class="btn-group btn-group-sm"> 
     <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button> 
     <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button> 
    </div> 
    </div> 
</div> 

CSS

.panel-heading.table-style { 
    display: table; 
    width: 100%; 
} 
.panel-heading.table-style .panel-title { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: left; 
} 
.panel-heading.table-style .button-wrap { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: right; 
} 

tôi đã thực hiện một demo cách tôi đang sử dụng, mà tôi chắc chắn có thể cải thiện.

Tôi rất ý thức rằng btn-group có khuynh hướng bọc bằng phương pháp này, trông có vẻ khủng khiếp. Tôi chỉ không có kiến ​​thức hoặc kinh nghiệm để sửa nó. Trong trường hợp sử dụng của tôi, tôi chỉ cần các nút duy nhất, không phải các nhóm, vì vậy nó hoạt động tốt cho tôi.

Answer 6

Tôi trộn 2 giải pháp tốt nhất trong một, cho một sự phù hợp tốt hơn mà không thay đổi quá nhiều kích thước hoặc sử dụng đầu chỉ số tiêu cực:

.panel-heading { 
    overflow: hidden; 
} 

và sử dụng:

<div class="pull-right"> 

đây bạn ví dụ: Jsfiddle example

Answer 7

Rất muộn, nhưng tôi chỉ giải quyết bằng css này:

.panel-heading h3, 
.panel-heading .btn-group 
{ 
    display:inline-block; 
}