Thêm khoảng trắng dọc bằng Twitter Bootstrap?

Cách tốt nhất để thêm khoảng trắng dọc bằng Bootstrap của Twitter là gì?

Ví dụ: giả sử tôi đang tạo một trang đích và muốn một chút (100px) khoảng trắng trống ở trên và dưới một nút nhất định. Rõ ràng, tôi có thể tạo một lớp nhất định cho nút cụ thể đó. Nhưng, tôi sẽ nghĩ rằng Bootstrap nên có cách DRY để thêm vào các khoảng trống dọc.

Trong Bootstrap 4 có các khoảng cách sử dụng .

Trích dẫn tài liệu cho ký hiệu được sử dụng :

Các tiện ích khoảng cách áp dụng cho tất cả các điểm dừng, từ xsđến xl, không có chữ viết tắt điểm dừng trong đó. Điều này là do các lớp đó được áp dụng từ min-width: 0và lên, và do đó không bị ràng buộc bởi một truy vấn phương tiện. Các điểm dừng còn lại, tuy nhiên, bao gồm viết tắt điểm dừng.

Các lớp học được đặt tên sử dụng định dạng {property}{sides}-{size}cho xs và {property}{sides}-{breakpoint}-{size}cho sm, md, lg, và xl.

Trường hợp tài sản là một trong:

• m - cho các lớp đã đặt margin
• p - cho các lớp đã đặt padding

Trường hợp các bên là một trong:

• t- cho các lớp đã đặt margin-tophoặcpadding-top
• b- cho các lớp đã đặt margin-bottomhoặcpadding-bottom
• l- cho các lớp đã đặt margin-lefthoặcpadding-left
• r- cho các lớp đã đặt margin-righthoặcpadding-right
• x- cho các lớp đặt cả hai *-leftvà*-right
• y- cho các lớp đặt cả hai *-topvà*-bottom
• để trống - cho các lớp đặt một marginhoặc paddingtrên cả 4 mặt của phần tử

Trong đó kích thước là một trong:

• 0 - đối với các lớp loại bỏ lề hoặc phần đệm bằng cách đặt nó thành 0
• 1- (theo mặc định) cho các lớp học mà thiết lập marginhoặc paddingđể$spacer * .25
• 2- (theo mặc định) cho các lớp học mà thiết lập marginhoặc paddingđể$spacer * .5
• 3- (theo mặc định) cho các lớp học mà thiết lập marginhoặc paddingđể$spacer
• 4- (theo mặc định) cho các lớp học mà thiết lập marginhoặc paddingđể$spacer * 1.5
• 5- (theo mặc định) cho các lớp học mà thiết lập marginhoặc paddingđể$spacer * 3

Vì vậy, để có thêm một số không gian dọc bên trên và bên dưới một phần tử, bạn sẽ sử dụng my-5lớp.

Trong v2, không có bất kỳ thứ gì được tích hợp cho nhiều không gian theo chiều dọc đó, vì vậy bạn sẽ muốn gắn bó với một lớp tùy chỉnh. Đối với chiều cao nhỏ hơn, tôi thường chỉ cần ném <div class="control-group">một nút xung quanh.

Bao bọc hoạt động nhưng khi bạn chỉ muốn một không gian, tôi thích:

<div class="col-xs-12" style="height:50px;"></div>

Xin lỗi để đào một ngôi mộ cũ ở đây, nhưng tại sao không làm điều này?

<div class="form-group">
    &nbsp;
</div>

Nó sẽ thêm một khoảng trống chiều cao của một phần tử dạng bình thường.

Có vẻ như khoảng 1 dòng trên một biểu mẫu là khoảng 50px (47px trên phần tử của tôi tôi vừa kiểm tra). Đây là một hình thức ngang, với nhãn ở bên trái 2col và đầu vào bên phải 10col. Vì vậy, pixel của bạn có thể thay đổi.

Vì của tôi về cơ bản là 50px, tôi sẽ tạo ra một miếng đệm cao 50px mà không có lề hoặc phần đệm;

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

Tôi biết điều này đã cũ, nhưng tôi đến đây để tìm kiếm điều tương tự, tôi thấy rằng Bootstrap có khối trợ giúp, rất tiện dụng cho những tình huống này:

<div class="help-block"></div>

Đối với phiên bản 3 dường như không có cách "bootstrap" để đạt được điều này một cách gọn gàng.

A panel, a wellvà form-grouptất cả cung cấp một số khoảng cách dọc.

Rõ ràng, một giải pháp khoảng cách dọc cụ thể chính thức hơn là trên lộ trình cho bootstrap v4

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

Tôi chỉ tạo ra một lớp div bằng nhiều độ cao khác nhau

<div class="divider-10"></div>

CSS là:

.divider-10 {
    width:100%; 
    min-height:1px; 
    margin-top:10px; 
    margin-bottom:10px;  
    display:inline-block; 
    position:relative;
}

Chỉ cần tạo một lớp chia cho những gì cần độ cao.

Thủ thuật của tôi. Không thanh lịch, nhưng nó hoạt động:

<p>&nbsp;</p>

Chỉ cần sử dụng <br/>. Tôi thấy mình ở đây đang tìm kiếm câu trả lời cho câu hỏi này và sau đó cảm thấy thật ngớ ngẩn vì không nghĩ đến việc sử dụng ngắt dòng đơn giản như đề xuất của người dùng JayKilleen trong một bình luận.

Tôi biết điều này đã cũ và có một số giải pháp tốt đã được đăng, nhưng một giải pháp đơn giản phù hợp với tôi là CSS sau đây

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

và sau đó tạo một div trong html của bạn

<div class="divider"></div>

Tôi đã thử sử dụng <div class="control-group">và nó không thay đổi bố cục của tôi. Nó không thêm không gian dọc. Giải pháp hiệu quả với tôi là:

<ol style="visibility:hidden;"></ol>

Nếu điều đó không cung cấp cho bạn đủ không gian dọc, bạn có thể tăng thêm bằng cách thêm các <li>&nbsp;</li>thẻ lồng nhau .

<form>
 <fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
 <fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>

http://v4-alpha.getbootstrap.com/components/forms/#form-controls

Không có gì KHÔ hơn

.btn {
    margin-bottom:5px;
}