Dodać pionowe spacje za pomocą Twitter Bootstrap?

Jaki jest najlepszy sposób dodawania pionowych białych znaków za pomocą Bootstrap Twittera?

Na przykład, powiedzmy, że tworzę stronę docelową i chcę trochę (100 pikseli) pustej spacji nad i pod określonym przyciskiem. Oczywiście mógłbym stworzyć określoną klasę dla tego konkretnego przycisku. Ale myślę, że Bootstrap powinien mieć SUCHY sposób dodawania pionowych pustych przestrzeni.

W Bootstrap 4 są narzędzia do rozmieszczania .

Cytując dokumentację używanej notacji :

Narzędzia do rozmieszczania odstępów, które mają zastosowanie do wszystkich punktów przerwania, od xsdo xl, nie mają w nich skrótu punktów przerwania. Dzieje się tak, ponieważ te klasy są stosowane od min-width: 0i w górę, a zatem nie są związane z zapytaniem o media. Pozostałe punkty przerwania zawierają jednak skrót punktu przerwania.

Klasy są nazywane przy użyciu formatu {property}{sides}-{size}dla xs i {property}{sides}-{breakpoint}-{size}na sm, md, lg, i xl.

Gdzie nieruchomość jest jedną z:

• m - dla zajęć, które ustawiają margin
• p - dla zajęć, które ustawiają padding

Gdzie strona jest jedną z:

• t- dla zajęć, które ustawiają margin-toplubpadding-top
• b- dla zajęć, które ustawiają margin-bottomlubpadding-bottom
• l- dla zajęć, które ustawiają margin-leftlubpadding-left
• r- dla zajęć, które ustawiają margin-rightlubpadding-right
• x- dla klas, które ustawiają zarówno *-lefti*-right
• y- dla klas, które ustawiają zarówno *-topi*-bottom
• puste - dla klas, które ustawiają a marginlub paddingna wszystkich 4 stronach elementu

Gdzie rozmiar jest jednym z:

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

Aby mieć dodatkową przestrzeń w pionie nad i pod elementem, użyłbyś my-5class.

W wersji 2 nie ma nic wbudowanego dla tak dużej przestrzeni w pionie, więc będziesz chciał trzymać się niestandardowej klasy. W przypadku mniejszych wysokości zwykle rzucam <div class="control-group">wokół przycisku.

Zawijanie działa, ale kiedy potrzebujesz tylko spacji, lubię:

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

Przepraszam, że wykopuję tu stary grób, ale dlaczego po prostu tego nie zrobić?

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

Doda spację na wysokość normalnego elementu formularza.

Wygląda na to, że około 1 linii w formularzu ma około 50 pikseli (47 pikseli w moim elemencie, który właśnie sprawdziłem). Jest to forma pozioma, z etykietą po lewej stronie 2 col i wejściem po prawej 10 col. Więc twoje piksele mogą się różnić.

Ponieważ mój ma w zasadzie 50 pikseli, utworzyłbym odstępnik o wysokości 50 pikseli bez marginesów i wypełnienia;

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

Wiem, że to jest stare, ale przyszedłem tutaj, szukając tego samego, stwierdziłem, że Bootstrap ma blok pomocy, bardzo przydatny w takich sytuacjach:

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

Wydaje się, że w wersji 3 nie ma sposobu na "bootstrap", aby to zgrabnie osiągnąć.

A panel, a welli a form-groupwszystkie zapewniają pewne odstępy w pionie.

Bardziej formalne, konkretne rozwiązanie dotyczące odstępów w pionie najwyraźniej znajduje się na mapie drogowej dla bootstrap v4

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

Po prostu stworzyłem klasę DIV przy użyciu różnych wysokości, tj

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

CSS to:

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

Po prostu utwórz klasę rozdzielaczy dla wszystkich potrzebnych wysokości.

Moja sztuczka. Nie eleganckie, ale działa:

<p>&nbsp;</p>

Po prostu użyj <br/>. Znalazłem się tutaj, szukając odpowiedzi na to pytanie, a potem poczułem się głupio, nie myśląc o użyciu prostego podziału wiersza, jak zasugerował użytkownik JayKilleen w komentarzu.

Wiem, że to jest stare i opublikowano już kilka dobrych rozwiązań, ale prostym rozwiązaniem, które zadziałało, jest następujący CSS

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

a następnie utwórz div w swoim html

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

Próbowałem użyć <div class="control-group">i nie zmieniło to mojego układu. Nie dodawał pionowej przestrzeni. Rozwiązanie, które działało dla mnie, to:

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

Jeśli to nie zapewnia wystarczającej ilości miejsca w pionie, możesz stopniowo uzyskać więcej, dodając zagnieżdżone <li>&nbsp;</li>znaczniki.

<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

Nie ma nic bardziej SUCHEGO niż

.btn {
    margin-bottom:5px;
}