Jak dodać górny margines do class="row"elementów za pomocą frameworka Bootstrap?

Edytowanie lub zastępowanie wiersza w programie ładującym Twittera jest złym pomysłem, ponieważ jest to podstawowa część rusztowania strony i potrzebne będą wiersze bez górnego marginesu.

Aby rozwiązać ten problem, zamiast tego utwórz nowy „bufor górny” nowej klasy, który doda potrzebny standardowy margines.

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

A następnie użyj go na div div wierszy, gdzie potrzebujesz górnego marginesu.

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

Ok, aby poinformować cię, co się wtedy wydarzyło, naprawiłem używanie nowych klas, jak mówi Acyra powyżej:

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

kiedy tylko chcę <div class="row top7"></div>

dla lepszego reagowania możesz dodać margin-top:7%zamiast 5pxna przykład: D

Bootstrap 3

Jeśli potrzebujesz oddzielić rzędy w bootstrap, możesz po prostu użyć .form-group. Dodaje to margines 15 pikseli na dole wiersza.

W twoim przypadku, aby uzyskać margines na górze, możesz dodać tę klasę do poprzedniego .rowelementu

<div class="row form-group">

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

Bootstrap 4

Możesz użyć wbudowanych klas odstępów

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

Litera „t” w nazwie klasy powoduje, że ma ona zastosowanie tylko do strony „górnej”, istnieją podobne klasy dla dolnej, lewej i prawej. Liczba określa rozmiar przestrzeni.

W przypadku Bootstrap 4 należy zastosować odstępy za pomocą

stenograficzne klasy użytkowe

w następującym formacie:

{property} {sides} - {size}

Gdzie nieruchomość jest jedną z:

• m - dla klas, które ustalają margines
• p - dla klas, które ustawiają padding

Gdzie strony są jednym z:

• t - dla klas, które ustawiają margines lub padding-top
• b - dla klas, które ustawiają margines-dół lub padding-bottom
• l - dla klas, które ustawiają lewy margines lub lewy margines
• r - dla klas, które ustawiają prawy margines lub dopełniający
• x - dla klas, które ustawiają zarówno * -left, jak i * -right
• y - dla klas, które ustawiają zarówno * -top, jak i * -bottom
• puste - dla klas, które ustalają margines lub dopełnienie ze wszystkich 4 stron elementu

Gdzie rozmiar jest jednym z:

• 0 - dla klas, które eliminują margines lub dopełnienie, ustawiając go na 0
• 1 - (domyślnie) dla klas, które ustawiają margines lub dopełnienie na $ spacer * .25
• 2 - (domyślnie) dla klas, które ustawiają margines lub wypełnienie na $ spacer * .5
• 3 - (domyślnie) dla klas, które ustawiają margines lub dopełnienie na $ spacer
• 4 - (domyślnie) dla klas, które ustawiają margines lub dopełnienie na $ spacer * 1.5
• 5 - (domyślnie) dla klas, które ustawiają margines lub wypełnienie na $ spacer * 3
• auto - dla klas, które ustawiają margines na auto

Powinieneś więc wykonać jedną z tych czynności:

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

Przeczytaj dokumentację, aby uzyskać więcej wyjaśnień. Wypróbuj przykłady na żywo tutaj .

Czasami margines na górze może powodować problemy z projektowaniem:

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

Dlatego zalecam utworzenie „klas na marginesie” zamiast „klas na marginesie” i zastosowanie ich do poprzedniego elementu.

Jeśli korzystasz z importu Bootstrap MNIEJ plików Bootstrap, spróbuj zdefiniować klasy marginesów z proporcjonalnymi przestrzeniami motywu Bootstrap:

.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);}  

Dodałem te klasy do arkusza stylów ładowania początkowego

.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; }

Przykład

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

Korzystam z tych klas, aby zmienić górny margines:

.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; }

Kiedy potrzebuję elementu, który ma odstęp 2em od elementu powyżej, używam go w następujący sposób:

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

Jeśli wolisz piksele, zmień em na px, aby ustawić go tak, jak chcesz.

Możesz użyć następującej klasy dla bootstrap 4:

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

Patrz: https://v4-alpha.getbootstrap.com/utilities/spacing/

Bootstrap 4 alfa, na marginesie: skrócone nazwy klas CSS mt-1, mt-2 (mt-lg-5, mt-sm-2) to samo dla dolnej, prawej, lewej i masz również klasę automatyczną ml- automatyczny

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

Jednostki są od 1do 5: w zmiennych.scss, co oznacza, że ​​jeśli ustawisz mt-1, daje to .25rem marginesu na górze.

$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;

czytaj więcej tutaj

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

Dodaj do tej klasy w pliku .css:

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

lub stwórz nową klasę i dodaj ją do elementu

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

Jeśli chcesz zmienić tylko na jednej stronie, dodaj następującą regułę stylu:

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

W Bootstrap 4 alpha + możesz tego użyć

class margin-bottom-5

Klasy są nazywane przy użyciu formatu: {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>

Bootstrap 3

CSS (tylko rynna, bez marginesów wokół):

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

CSS (równe marginesy, 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;
}

Stosowanie:

<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>

(z SASS lub LESS 15px może być zmienną z bootstrap)

<div class="row row-padding">

prosty kod

możesz dodać ten kod:

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

Wystarczy użyć tego bs3-upgradepomocnika do wyrównania odstępów i wyrównania tekstu ...

https://github.com/studija/bs3-upgrade

Jeśli używasz BootStrap 3.3.7, możesz użyć biblioteki open source bootstrap-spacer przez NPM

npm install bootstrap-spacer

lub możesz odwiedzić stronę github:

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

Oto przykład tego, jak to działa do spacji wierszy za pomocą klasy .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>

Jeśli potrzebujesz spacji między kolumnami, możesz również dodać klasę .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>

Możesz także łączyć różne klasy .row-spacer i .row-col-spacer:

<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>

Moja sztuczka Nie tak czyste, ale działa dobrze dla mnie

<p>&nbsp;</p>