Twitter Bootstrap - dodaj górną przestrzeń między wierszami


Odpowiedzi:


801

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

45
Edycja natywnego wiersza jest niepoprawna dla frameworka, a nowa klasa powinna po prostu uzupełniać klasę wiersza ... to subtelna różnica, ale w Bootstrap na Twitterze wiersz ma określoną rolę w układzie strony. W każdym razie staram się tylko pomóc, moje rozwiązanie jest skuteczne na problem.
Acyra

11
nie ma mowy, te odpowiedzi są nieco inne IMHO. Ten jest bardziej użyteczny, ponieważ obejmuje „nazwij swój styl klasy, aby twój HTML był łatwiejszy do odczytania” i możesz czytać marginesy w html zamiast rowSpecificForName. Ta odpowiedź jest bardziej zgodna z twitterowymi wzorami ładowania początkowego.
Dean Hiller

2
Dodają określone klasy pionowych odstępów do Bootstrap 4: github.com/twbs/bootstrap/issues/4286
icc97

2
Na podstawie tych komentarzy dowiedziałem się tylko, że programiści są bardzo pozytywni i niektórzy wolą 2 + 3 = 5, a inni 3 + 2 = 5. Przechodząc dalej ...
Fabio S.,

3
@FabioS. Należy się nauczyć, że dla frameworka takiego jak Bootstrap edytowanie kodu natywnego lub zastępowanie go jest złym pomysłem. Scenariusze są nieograniczone, ale oto kilka przykładów. a.) nadpisywanie - jeśli nadpisujesz klasę .row, musisz teraz przejść przez projekt i dodać dodatkową klasę do wierszy, które nie powinny otrzymać marginesu. b)) edytować kod natywny - dziedziczysz projekt w pracy i chcesz przejść do bootstrap4; OOPS! Nic nie wygląda dobrze !? Teraz musisz przeszukać plik bootstrap 3, próbując znaleźć to, co u diabła zmienił poprzedni programista.
peroija

176

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


13
Uważam, że to rozwiązanie jest znacznie bardziej eleganckie niż rozwiązanie przyjęte.
rdiaz82

72
To jest to samo.
Alexander

@alexander, ale bardziej ogólny.
Ejaz

6
Czym się .top-buffer { margin-top:20px; }różni .top30 { margin-top:30px; }? Z punktu widzenia każdego programisty: jest tak samo. Dostosowania pasujące do przypadku użycia nie liczą się tutaj. Szczególnie nie, jeśli OP odpowiedział na swoje własne pytanie.
Alexander

2
Klasyczny górny margines 17px; Bardzo przydatne.
adripanico

129

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.


Czy grupa formularzy została usunięta z BS4?
Z. Khullah

3
Nie, form-groupjest nadal obecny , ale dodano specjalne klasy dla marginesów / wypełniania, które mogą wykonać zadanie i mają więcej opcji.
Buksy

Czy wprowadzono wiele zmian w Bootstrap V 4? Jestem teraz na wersji 4 i mt-3nie działa tak używanyform-group
Nick Schwaderer

Powinien działać , sprawdź, czy plik bootstrap css, który podłączyłeś do swojego projektu, zawiera definicję klasy „.mt-3”.
Buksy

81

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 .


3
To powinna być akceptowana odpowiedź teraz w wersji Bootstrap 4. Zawiera wbudowane klasy, nie ma potrzeby tworzenia nowych.
Matt K

45

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

33

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>

27

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.


6
Dobry pomysł, ale streszczam liczby, ponieważ są one zbyt szczegółowe. Jeśli pozostaniesz przy abstrakcjach takich jak s, m, l, xl, xxl itp., Możesz zmienić rozmiary za pomocą css bez konieczności zmiany nazw w szablonach.
Mike Purcell,

1
@MikePurcell Dobra myśl i może to być właściwe rozwiązanie dla Ciebie. Wolę jednak dokładniejszy sposób definiowania marginesów. Używanie em zamiast px daje mi luźny sposób na osiągnięcie tego bez zbytniego określania.
Heksodus

3
Jaka jest korzyść z <div class="row margin-top-20">ponad <div class"row" style="margin-top: 2.0em">?
icc97

@ icc97 Zasadniczo, osobne obawy, ale tutaj możesz zobaczyć inne opinie: stackoverflow.com/a/2612494/1683224 .
Wiley Marques,

@WileyMarques Tak jest w przypadku klasy o nazwie np. „Górny bufor” (jak w zaakceptowanej odpowiedzi), ale nie ma sensu w przypadku klasy o nazwie margin-top-20. Chyba że jesteś zadowolony z marginesu w pierwszej dwudziestce, który faktycznie doda coś innego niż 2emy wypełnienia, co byłoby po prostu mylące.
thelem


4

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


3

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

7
uhmmmmm nie lubię dotykać css, co jeśli potrzebuję wierszy bez marginesów na innych stronach?
itsme

Możesz stworzyć nową klasę .rowSpecificForm
Nielsen Ramon

2
Ale w Twitter Bootstrap nie ma zdefiniowanej klasy css tylko dla „margin-top”.
Nielsen Ramon,

dziwne, że nie ustawili kilku klas do poruszania się w pionie, muszę je dodać, nie ma innego rozwiązania: /, dziękuję Nielsen
jego

8
pamiętaj o kaskadach CSS, więc nigdy nie będziesz musiał edytować bootstrap.css.
ONOZ

1

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

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

1

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

class margin-bottom-5

Klasy są nazywane przy użyciu formatu: {property}-{sides}-{size}


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

Dodaj wyjaśnienia do swojej odpowiedzi. Odpowiedzi bez wyjaśnień są bezużyteczne.
ADreNaLiNe-DJ

1

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)



0

możesz dodać ten kod:

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


0

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>

1
Odradzałbym dodawanie zależności dla 40 linii css
Andrew Diamond

-3

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

<p>&nbsp;</p>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.