Làm cách nào để thêm lề trên cho class="row"các phần tử bằng cách sử dụng twitter bootstrap framework?

Chỉnh sửa hoặc ghi đè hàng trong bootstrap Twitter là một ý tưởng tồi, bởi vì đây là một phần cốt lõi của giàn giáo trang và bạn sẽ cần các hàng không có lề trên.

Để giải quyết vấn đề này, thay vào đó, hãy tạo một lớp "bộ đệm trên cùng" mới có thêm lề tiêu chuẩn mà bạn cần.

.top-buffer { margin-top:20px; }

Và sau đó sử dụng nó trên các div hàng nơi bạn cần một lề trên.

<div class="row top-buffer"> ...

Ok chỉ để cho bạn biết những gì đã xảy ra sau đó, tôi đã sửa bằng cách sử dụng một số lớp mới như Acyra nói ở trên:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

bất cứ khi nào tôi muốn tôi làm <div class="row top7"></div>

để đáp ứng tốt hơn, bạn có thể thêm margin-top:7%thay vì 5pxví dụ: D

Bootstrap 3

Nếu bạn cần tách các hàng trong bootstrap, bạn chỉ cần sử dụng .form-group. Điều này thêm lề 15px vào cuối hàng.

Trong trường hợp của bạn, để có được lề trên, bạn có thể thêm lớp này vào .rowphần tử trước

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

bootstrap 4

Bạn có thể sử dụng các lớp khoảng cách tích hợp

<div class="row mt-3"></div>

Tên "t" trong tên lớp làm cho nó chỉ áp dụng cho phía "trên cùng", có các lớp tương tự cho phía dưới, bên trái, bên phải. Các định nghĩa số kích thước không gian.

Đối với khoảng cách Bootstrap 4 nên được áp dụng bằng cách sử dụng

lớp tiện ích tốc ký

theo định dạng sau:

{property} {bên} - {size}

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

• m - cho các lớp đặt lề
• p - cho các lớp đặt phần đệm

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

• t - đối với các lớp đặt lề trên hoặc đệm trên cùng
• b - đối với các lớp đặt lề dưới hoặc đệm đáy
• l - đối với các lớp đặt lề trái hoặc đệm trái
• r - đối với các lớp đặt lề phải hoặc đệm-phải
• x - cho các lớp đặt cả * -left và * -right
• y - cho các lớp đặt cả * -top và * -bottom
• để trống - cho các lớp đặt lề hoặc phần đệm ở cả 4 mặt của phần tử

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

• 0 - cho 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 đặt lề hoặc phần đệm thành $ spacer * .25
• 2 - (theo mặc định) cho các lớp đặt lề hoặc phần đệm thành $ spacer * .5
• 3 - (theo mặc định) cho các lớp đặt lề hoặc phần đệm thành $ spacer
• 4 - (theo mặc định) cho các lớp đặt lề hoặc phần đệm thành $ spacer * 1.5
• 5 - (theo mặc định) cho các lớp đặt lề hoặc phần đệm thành $ spacer * 3
• tự động - cho các lớp đặt lề thành tự động

Vì vậy, bạn nên làm bất kỳ trong số này:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Đọc tài liệu để được giải thích thêm. Hãy thử các ví dụ trực tiếp ở đây .

Đôi khi, lề trên có thể gây ra sự cố thiết kế:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Vì vậy, tôi khuyên bạn nên tạo "các lớp dưới cùng" thay vì "các lớp trên cùng" và áp dụng chúng cho mục trước đó.

Nếu bạn đang sử dụng Bootstrap, nhập LESS Bootstrap, hãy thử xác định các lớp dưới cùng với các không gian Chủ đề Bootstrap theo tỷ lệ:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Tôi đã thêm các lớp này vào biểu định kiểu bootstrap của mình

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Thí dụ

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Tôi đang sử dụng các lớp này để thay đổi lề trên:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Khi tôi cần một phần tử có khoảng cách 2em từ phần tử ở trên, tôi sử dụng nó như thế này:

<div class="row margin-top-20">Something here</div>

Nếu bạn chọn các pixel trước, hãy thay đổi em thành px để thực hiện theo cách của bạn.

Bạn có thể sử dụng lớp sau cho bootstrap 4:

mt-0 mt-1 mt-2 mt-3 mt-4 ...

Tham chiếu: https://v4-alpha.getbootstrap.com/utilities/spaces/

Bootstrap 4 alpha, cho lề trên cùng: tên lớp viết tắt CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) tương tự cho phía dưới, bên phải, bên trái và bạn cũng có lớp tự động ml- Tự động

    <div class="mt-lg-1" ...>

Các đơn vị là từ 1đến 5: trong các biến.scs có nghĩa là nếu bạn đặt mt-1, nó sẽ cho 0,25rem của đỉnh lề.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

đọc thêm tại đây

https://v4-alpha.getbootstrap.com/utilities/spaces/#horizontal-centering

Thêm vào lớp này trong tệp .css:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

hoặc tạo một lớp mới và thêm nó vào phần tử

.rowSpecificFormName td {
    margin-top: 50px;
}

Nếu bạn muốn thay đổi chỉ trên một trang, hãy thêm quy tắc kiểu sau:

 #myCustomDivID .row {
     margin-top:20px;
 }

Trong Bootstrap 4 alpha + bạn có thể sử dụng cái này

class margin-bottom-5

Các lớp được đặt tên bằng định dạng: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (chỉ máng xối, không có lề xung quanh):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (lề bằng nhau xung quanh, 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Sử dụng:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(với SASS hoặc LESS 15px có thể là một biến từ bootstrap)

<div class="row row-padding">

mã đơn giản

bạn có thể thêm mã này:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Chỉ cần sử dụng bs3-upgradetrợ giúp này cho các khoảng cách và sắp xếp văn bản ...

https://github.com/studija/bs3-up tiến

Nếu bạn đang sử dụng BootStrap 3.3.7, bạn có thể sử dụng thư viện mã nguồn mở bootstrap-spacer thông qua NPM

npm install bootstrap-spacer

hoặc bạn có thể truy cập trang github:

https://github.com/chigozieorunta/bootstrap-spacer

Đây là một ví dụ về cách thức này hoạt động với các hàng không gian bằng cách sử dụng lớp .row-spacer:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Nếu bạn yêu cầu khoảng trắng giữa các cột, bạn cũng có thể thêm lớp .row-col-spacer:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Và bạn cũng có thể kết hợp nhiều lớp .row-spacer & .row-col-spacer với nhau:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Thủ thuật của tôi. Không sạch sẽ, nhưng làm việc tốt cho tôi

<p>&nbsp;</p>