Làm cách nào để tập trung các nút trong Twitter Bootstrap 3?

Tôi đang xây dựng một biểu mẫu trong Twitter Bootstrap nhưng tôi gặp vấn đề với việc căn giữa nút bên dưới đầu vào trong biểu mẫu. Tôi đã thử áp dụng center-blocklớp cho nút nhưng không được. Làm thế nào tôi nên sửa lỗi này?

Đây là mã của tôi.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Gói Nút trong div với lớp "văn bản trung tâm".

Chỉ cần thay đổi điều này:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

Về điều này:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Biên tập

Kể từ BootstrapV4 , center-blockđã bị loại bỏ # 19102 vìm-*-auto

Theo tài liệu Twitter Bootstrap: http://getbootstrap.com/css/#helper-groupes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Tất cả các lớp center-blocklàm là bảo phần tử có lề 0 tự động, tự động là lề trái / phải. Tuy nhiên, trừ khi lớp văn bản trung tâm hoặc văn bản css-align: centre; được đặt trên cha mẹ, phần tử không biết điểm để thực hiện phép tính tự động này từ đó sẽ không tập trung vào chính nó như dự đoán.

Xem ví dụ về mã ở đây: https://jsfiddle.net/Seany84/2j9pxt1z/

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

thêm vào phong cách của bạn:

hiển thị: bảng; lề: 0 tự động;

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Bạn có thể làm điều đó bằng cách đưa ra lề hoặc bằng cách định vị các yếu tố đó một cách tuyệt đối.

Ví dụ

.button{
  margin:0px auto; //it will center them 
}

0px sẽ từ trên xuống và dưới cùng và tự động sẽ từ trái và phải.

Tôi đã thử mã sau đây và nó đã làm việc cho tôi.

<button class="btn btn-default center-block" type="submit">Button</button>

Điều khiển nút nằm trong div và sử dụng lớp bootstrap của khối trung tâm đã giúp tôi căn chỉnh nút với trung tâm của div

Kiểm tra liên kết nơi bạn sẽ tìm thấy lớp khối trung tâm

http://getbootstrap.com/css/#helper-groupes-center

sử dụng text-align: centertài sản css

Cập nhật cho Bootstrap 4:

Bọc nút bằng một bộ div với các lớp tiện ích 'd-flex' và 'justify-content-centre' để tận dụng lợi thế của flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

Lợi ích của việc sử dụng flexbox là có thể thêm các yếu tố / nút bổ sung trên cùng một trục, nhưng với sự căn chỉnh riêng của chúng. Nó cũng mở ra khả năng căn chỉnh theo chiều dọc với các lớp 'align-items-start / centre / end'.

Bạn có thể bọc nhãn và nút bằng một div khác để giữ chúng thẳng hàng với nhau.

ví dụ: https://codepen.io/anon/pen/BJoeRY?editors=1000

Bạn có thể làm như sau. Nó cũng tránh các nút chồng lên nhau.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Nó làm việc cho tôi cố gắng để làm cho một độc lập <div>sau đó đưa buttonvào đó. chỉ như thế này :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Sau đó, đi đến CSStrang Phong cách của bạn và làm Text-align:centernhư thế này:

#contactBtn{text-align: center;}

Dành cho Bootstrap 3

chúng tôi chia không gian cho các cột, chúng tôi sử dụng 8 cột nhỏ (col-xs-8), chúng tôi để lại 4 cột trống (col-xs-offset-4) và chúng tôi áp dụng thuộc tính (khối giữa)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Dành cho Bootstrap 4

Chúng tôi sử dụng Spaces, Bootstrap bao gồm một loạt các lớp tiện ích lề phản hồi được viết tắt và được đệm để sửa đổi sự xuất hiện của một phần tử. Các lớp được đặt tên bằng định dạng {property} {side} - {size} cho xs và {property} {side} - {breakpoint} - {size} cho sm, md, lg và xl.

xem thêm thông tin tại đây: https://getbootstrap.com/docs/4.1/utilities/spaces/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Tôi đã có vấn đề này. Tôi đã sử dụng

<div class = "col-xs-8 text-center">

Trên div của tôi chứa một vài dòng h3, một vài dòng h4 và nút Bootstrap. Tất cả mọi thứ ngoài nút nhảy vào trung tâm sau khi tôi sử dụng trung tâm văn bản nên tôi đã đi vào trang CSS của mình ghi đè Bootstrap và đưa nút này vào

margin: auto;

mà dường như đã giải quyết vấn đề.

hoặc bạn có thể cung cấp các mức bù cụ thể để tạo vị trí nút mà bạn muốn chỉ đơn giản với hệ thống lưới bootstrap,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

bằng cách này, cũng cho phép bạn chỉ định kích thước nút nếu bạn đặt btn-block. chắc chắn, điều này sẽ chỉ hoạt động phạm vi kích thước md, nếu bạn cũng muốn đặt các kích thước khác, hãy sử dụng xs, sm, lg.