Hướng dẫn react-bootstrap space between buttons - không gian phản ứng-bootstrap giữa các nút

Tôi muốn cung cấp khoảng cách giữa các nút là có một cách để cung cấp khoảng cách bằng cách sử dụng bootstrap để chúng phù hợp cho các độ phân giải màn hình khác nhau.

Tôi đã thử sử dụng

.margin-left{
    margin-left: 80px !important;
}

0 nhưng đó có phải là cách chính xác để làm điều này không. ??

Đây là bản demo

HTML:

    
       ADD PACKET
    
    
       EDIT CUSTOMER
    
    
       HISTORY
    
    
       DELETE CUSTOMER
    

CSS:

.margin-left{
    margin-left: 80px !important;
}

Đã hỏi ngày 29 tháng 12 năm 2014 lúc 13:34Dec 29, 2014 at 13:34

Vaibhav Jainvaibhav JainVaibhav Jain

5.01110 Huy hiệu vàng51 Huy hiệu bạc113 Huy hiệu đồng10 gold badges51 silver badges113 bronze badges

5

Bạn có thể đạt được bằng cách sử dụng khoảng cách bootstrap. Khoảng cách bootstrap bao gồm một loạt các tỷ lệ và phần đệm đáp ứng tốc độ. Trong ví dụ dưới đây

.margin-left{
    margin-left: 80px !important;
}

1 đặt

.margin-left{
    margin-left: 80px !important;
}

2 hoặc

.margin-left{
    margin-left: 80px !important;
}

3 thành

.margin-left{
    margin-left: 80px !important;
}

4 * .25.Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example

.margin-left{
    margin-left: 80px !important;
}

1 set the

.margin-left{
    margin-left: 80px !important;
}

2 or

.margin-left{
    margin-left: 80px !important;
}

3 to

.margin-left{
    margin-left: 80px !important;
}

4 * .25.

Example:

Sign up
Login

Bạn có thể đọc thêm ở khoảng cách bootstrap.

Đã trả lời ngày 18 tháng 6 năm 2018 lúc 7:07Jun 18, 2018 at 7:07

8

HTML:

CSS:

.btn-space {
    margin-right: 5px;
}

Đã trả lời ngày 17 tháng 9 năm 2015 lúc 6:23Sep 17, 2015 at 6:23

1

1. Bọc các nút của bạn trong một div với

   .margin-left{
       margin-left: 80px !important;
   }
   

   5 (ví dụ).
2. Thêm

   .margin-left{
       margin-left: 80px !important;
   }
   

   6 vào các nút của bạn.

Điều này sẽ cung cấp khoảng cách vĩnh viễn.

vphilipnyc

7.8218 Huy hiệu vàng52 Huy hiệu bạc78 Huy hiệu đồng8 gold badges52 silver badges78 bronze badges

Đã trả lời ngày 29 tháng 12 năm 2014 lúc 13:59Dec 29, 2014 at 13:59

2

Nếu bạn muốn sử dụng lề, hãy xóa lớp trên mỗi nút và sử dụng: Bộ chọn CSS-con cuối cùng.:last-child CSS selector.

HTML:

    
       ADD PACKET
    
    
       EDIT CUSTOMER
    
    
       HISTORY
    
    
       DELETE CUSTOMER
    

CSS:

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}

Đã trả lời ngày 22 tháng 3 năm 2016 lúc 9:58Mar 22, 2016 at 9:58

1

Tôi khá tệ ở HTML nhưng tôi đã sử dụng

.margin-left{
    margin-left: 80px !important;
}

7 giữa các nút và nó hoạt động tốt.

Đã trả lời ngày 20 tháng 5 năm 2020 lúc 12:01May 20, 2020 at 12:01

Philippe Remyphilippe RemyPhilippe Remy

2.7294 Huy hiệu vàng23 Huy hiệu bạc35 Huy hiệu Đồng4 gold badges23 silver badges35 bronze badges

1

Phụ thuộc vào số lượng không gian bạn muốn. Tôi không chắc tôi đồng ý với logic của việc thêm "col-xx-1" ở giữa mỗi cái, bởi vì sau đó bạn đang xác định toàn bộ "cột" ở giữa mỗi từng người.

Nếu bạn chỉ muốn "một khoảng cách nhỏ" ở giữa mỗi nút, tôi muốn thêm phần đệm vào hàng bao gồm. Bằng cách đó, tôi vẫn có thể sử dụng tất cả 12 cột, trong khi bao gồm "không gian" ở giữa mỗi nút.

Bootply: http://www.bootply.com/ugexrxppvd

Đã trả lời ngày 29 tháng 12 năm 2014 lúc 13:50Dec 29, 2014 at 13:50

Gandersgandersganders

7.18816 Huy hiệu vàng65 Huy hiệu bạc113 Huy hiệu đồng16 gold badges65 silver badges113 bronze badges

1

Sử dụng lớp

.margin-left{
    margin-left: 80px !important;
}

8 cho tất cả các nút Xóa lớp

.margin-left{
    margin-left: 80px !important;
}

0

Thí dụ :

   ADD PACKET

CSS sẽ giống như:

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

Đã trả lời ngày 4 tháng 2 năm 2016 lúc 9:06Feb 4, 2016 at 9:06

SHASHIKALASHASHIKALAShashikala

4471 Huy hiệu vàng8 Huy hiệu bạc25 Huy hiệu đồng1 gold badge8 silver badges25 bronze badges

2

Bạn có thể sử dụng khoảng cách tích hợp từ Bootstrap để không cần thêm CSS ở đó. Đây là dành cho bootstrap 4.

Đã trả lời ngày 28 tháng 9 năm 2017 lúc 13:19Sep 28, 2017 at 13:19

Dragan B.Dragan B.Dragan B.

4114 Huy hiệu bạc9 Huy hiệu đồng4 silver badges9 bronze badges

Mã gốc chủ yếu ở đó, nhưng bạn cần ____20s xung quanh mỗi nút. Trong Bootstrap 3, bạn có thể sử dụng BTN-toolbar và nhóm BTN để hoàn thành công việc; Tôi đã không thực hiện BS4 nhưng nó có cấu trúc tương tự.

  

    Button 1
  
  

    Button 2
  

Đã trả lời ngày 20 tháng 2 năm 2018 lúc 22:04Feb 20, 2018 at 22:04

Mike Kmike kMike K

5914 Huy hiệu bạc8 Huy hiệu đồng4 silver badges8 bronze badges

1

Thêm lề vào một nút làm cho nó rộng hơn để các nút LES phù hợp với hệ thống lưới. Nếu chỉ có hiệu ứng thị giác là quan trọng, thì hãy cho nút một đường viền màu trắng với [style = "lề: 0px; đường viền: màu trắng rắn;"] điều này để lại chiều rộng nút không bị ảnh hưởng.

Đã trả lời ngày 4 tháng 11 năm 2017 lúc 20:09Nov 4, 2017 at 20:09

Sử dụng bootstrap, bạn có thể thêm

Sign up
Login

1 giữa các nút.

Đã trả lời ngày 29 tháng 12 năm 2014 lúc 13:38Dec 29, 2014 at 13:38