Bootstrap: Căn chỉnh hai nút trên cùng một hàng

Question

Về cơ bản những gì tôi đang cố gắng thực hiện để nhận được hai nút ở phía đối diện của trang web nhưng trên cùng một hàng. Đây là những gì nó trông giống như:

Và đây là mã cho những gì tôi có:

   <div class="panel-footer"><!-- panel-footer --> 

       <div class="previous"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
        </button> 
       </div> 

       <div class="next"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
        </button> 
       </div> 

      </div><!-- end panel-footer --> 

Và đây là CSS cho các lớp 'trước' và 'bên cạnh'.

.previous { 
text-align: left; 
} 

.next { 
text-align: right; 
} 

Cảm ơn. Tôi đang sử dụng bootstrap nếu điều đó giúp.

Answer 1

Quấn chúng trong hai cột riêng biệt như thế này:

<div class="panel-footer row"><!-- panel-footer --> 
    <div class="col-xs-6 text-left"> 
     <div class="previous"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </button> 
     </div> 
    </div> 
    <div class="col-xs-6 text-right"> 
     <div class="next"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </button> 
     </div> 
    </div> 
</div><!-- end panel-footer --> 

Bằng cách này, bạn có thể sử dụng được xây dựng trong lớp helper văn bản trái/text-đúng như tôi đã thực hiện trên các div cột vì vậy bạn không cần phải thêm css phụ. Trong trường hợp đó, bạn có thể xóa các div bổ sung mà bạn đã thêm vào.

Answer 2

Bạn cần phao các div chứa các nút ở bên trái và bên phải. Vì bạn đang sử dụng Bootstrap, tôi khuyên bạn nên sử dụng các lớp .pull-right và .pull-left bên trong.

Cung cấp cho div trước đó lớp .pull-left và div tiếp theo lớp kéo phải.

Bạn có thể phải làm cho nút tiếp theo đến trước trong nguồn html của mình.

Bạn cũng có thể thêm float: left; cho lớp và float hiện tại của bạn: right; vào lớp .next.

Tốt hơn, hãy loại bỏ những div trước đó/tiếp theo và áp dụng các lớp kéo trái/kéo phải trực tiếp cho các nút.

Answer 3

Tôi sẽ sử dụng phao trong css của bạn

.previous { 
float: left; 
} 

.next { 
float: right; 
} 

Bạn có thể kiểm tra tùy chọn này đây jsfiddle.

Answer 4

Tôi nghĩ Bootstrap tự động thực hiện điều này nổi cho bạn nếu bạn quấn nó trong div .row vì nó dựa trên một mạng lưới?

<div class="row"> 
<div class="pull-left"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </button> 
</div> 

<div class="pull-right"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </button> 
</div> 
</div> 

Answer 5

Bạn có thể thử những gì HaukurHaf nói, nó sẽ hoạt động. Phương pháp nổi đơn giản.

Hoặc bạn cũng có thể đặt hai div .srevious và .next đó trong .col- classes và sau đó bọc chúng trong div hàng. Vì vậy, nó sẽ đọc:

<div class="panel-footer"> 
<div class="row"> 
    <div class="col-xs-6 previous"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </button> 
    </div> 
    <div class="col-xs-6 next"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </button> 
    </div> 
</div> 

Bằng cách này bạn đang theo dõi bố trí cột Bootstrap của.