Bootstrap 3: Các phần tử span nổi ngay trong danh sách nhóm-mục không tiêu thụ không gian dọc

Question

Trong Bootstrap 3 list-group-item, tôi có biểu tượng, một số văn bản và hai biểu tượng/nút sẽ nổi ngay.

Tôi cố gắng này:

<a class="list-group-item" ng-click="handleClick()"> 
    <span class="glyphicon glyphicon-file"></span> 
    Some text goes here 
    <button class="btn btn-xs btn-warning pull-right" ng-click="handleButtonClick()"><span class="glyphicon glyphicon-trash"></span></button> 
    <some:custom:span></some:custom:span> 
</a> 

này hoạt động tuyệt vời nếu kết quả phù hợp trong một dòng:

Nó cũng hoạt động khi cửa sổ là rất mỏng mà các văn bản thực tế không vừa với một dòng:

Tuy nhiên, nếu các cửa sổ cho phép văn bản để ở lại trong một dòng, nhưng không có đủ không gian cho các nhịp kéo bên phải, mọi thứ được điều sai lầm:

Những gì tôi thực sự muốn là rằng các khoảng cách pull-right bắt đầu một dòng mới và căn chỉnh ngay, và list-group-item mở rộng theo chiều dọc để chúng vừa với nhau. Làm thế nào tôi có thể đạt được điều đó?

Answer 1

Để giữ các nút được căn chỉnh, hãy quấn một phần tử mới xung quanh chúng và thả phần tử bao quanh. Sau đó, xóa float trên các mục danh sách có lớp .clearfix để sửa chiều cao của chúng.

<div class="list-group"> 
    <a href="#" class="list-group-item clearfix"> 
    <span class="glyphicon glyphicon-file"></span> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <span class="pull-right"> 
     <button class="btn btn-xs btn-info">CCS</button> 
     <button class="btn btn-xs btn-warning"> 
     <span class="glyphicon glyphicon-trash"></span> 
     </button> 
    </span> 
    </a> 
</div> 

Xem ví dụ trực tiếp tại đây: http://jsfiddle.net/cdog/EpG7x/.

Tuy nhiên, việc đặt các nút trong liên kết không hợp lệ theo HTML5 specification from W3C.

Yếu tố a có thể được bao bọc xung quanh toàn bộ đoạn văn bản, danh sách, bảng biểu, và vân vân, thậm chí toàn bộ phần, miễn là không có tương tác nội dung bên trong (ví dụ nút hoặc liên kết khác).

Kết quả tương tự có thể đạt được bằng cách sử dụng bảng có bảng thay thế.

<div class="panel panel-default"> 
    <table class="table table-hover"> 
    <tbody> 
     <tr> 
     <td> 
      <span class="glyphicon glyphicon-file"></span> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </td> 
     <td class="text-right text-nowrap"> 
      <button class="btn btn-xs btn-info">CCS</button> 
      <button class="btn btn-xs btn-warning"> 
      <span class="glyphicon glyphicon-trash"></span> 
      </button> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Để ngăn nội dung bên trong ô khỏi gói, bạn có thể sử dụng lớp .text-nowrap (được thêm vào trong Bootstrap v3.2.0).

Xem ví dụ trực tiếp tại đây: http://jsfiddle.net/cdog/6mFDH/.