Dodać pionowe spacje za pomocą Twitter Bootstrap?

162

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.

Ryan
źródło

Odpowiedzi:

39

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.

vlp
źródło
3
Czy możesz podać przykład prawidłowego ciągu klasy?
Kolob Canyon
Miły! To jest świetne.
Tiki
51

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.

jmdeldin
źródło
8
lub <div class = "btn-toolbar">
dyurkavets
9
Dzięki. Utworzyłem teraz kilka klas spacer10, spacer50 itd. Do tego zastosowania. Widzę, że na githubie jest
Ryan
1
@Ryan: Świetnie, nie widziałem żądania ściągnięcia. Jestem przez to trochę skonfliktowany. Bootstrap jest prawie całkowicie prezentacyjny (i wygodny), ale jeśli zmrużysz oczy wystarczająco mocno, aby zignorować cały dodatkowy kod HTML, możesz wyprowadzić z niego semantykę. Odstępy w pionie są czysto prezentacyjne, więc myślę, że najlepiej jest to zrobić z niestandardową klasą / identyfikatorem.
jmdeldin,
2
To było dla v2, ale wygląda na to, że v3 zminimalizowało odstępy .btn-toolbar, więc powinieneś po prostu dodać nową klasę z własnymi marginesami.
jmdeldin
3
Najwyraźniej żądanie funkcji github zostało zamknięte, a funkcja może trafić do Bootstrap v4. bit.ly/R9oap9
Ryan
48

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

<div class="col-xs-12" style="height:50px;"></div>
ukryta nazwa użytkownika
źródło
16
Dodawanie stylu wbudowanego podczas pracy z Bootstrap generalnie nie jest dobrym pomysłem. Powinien przynajmniej wejść do CSS.
alexykot
2
zauważ, że "col-xs-12" to dokładnie to samo, co brak zajęć
Soldeplata Saketos
34

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>
Przebrnąć
źródło
1
To dodaje przestrzeń poniżej grupy, ale nie powyżej
icc97
Oczywiście, że tak, właśnie o to prosił, sposób na dodanie pionowej pustej przestrzeni. Jeśli potrzebujesz niestandardowej grupy formularzy lub wiersza, a nawet przycisku, utwórz własną klasę, aby ją dodać, zastępując marginesy. To znaczy: class = "form-group spaced-group" i ".spaced-group {margin-top: 15px! Ważne; margin-bottom: 15px! Ważne;} ... To po prostu powszechny sens CSS.
Wade
OP zapytał konkretnie: „trochę (100 pikseli) pustej białej przestrzeni nad i pod określonym przyciskiem”
icc97,
1
Nie, to był przykład, a nie jego pytanie. Jego pytanie brzmiało: „Jaki jest najlepszy sposób na dodanie pionowej pustej przestrzeni za pomocą narzędzia Bootstrap Twittera?” - puste miejsce w pionie różni się od marginesu określonego elementu. Gdyby robił to dla wszystkich przycisków, mógł zmienić margines btn lub stworzyć własną klasę typu „btn-spaced” z pożądanymi marginesami. Jeśli chce tylko sposobu na dodanie odstępu w dowolnym miejscu, potrzebuje elementu dystansowego o stałej wysokości, jak odpowiedziałem. Zadał jedno pytanie i podał przykład innego. Założyłem, że zna CSS na tyle, by wiedzieć, że może zmienić marginesy.
Wade
Ponieważ powiedział metodę DRY i przycisk, utworzyłbym klasę przycisku z marginesami, które chciałem: z odstępami btn. Gdyby nie tylko przyciski, to ogólny margines dotyczyłby wierszy, grup formularzy, cokolwiek. Na przykład class = "row space-small" lub class = "form-group space-medium" .. Gdzie małe, średnie i duże są tylko wariantami marginesów i można je zastosować praktycznie do wszystkiego. - trudno powiedzieć, którego chce operacja. Tylko dla przycisków lub tylko dla dowolnego elementu ..
Wade
24

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>
Krzyż
źródło
21

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

ErichBSchulz
źródło
5
.form-group wydaje się najlepszym wyborem, ponieważ css jest ograniczone do margin-bottom: 15px. .well i .panel nie powinny być używane, jeśli chcesz po prostu dodać odstępy, ponieważ mają one inne atrybuty (takie jak tło, wypełnienie, obramowanie itp.)
xaa
9

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.

user5593012
źródło
8

Moja sztuczka. Nie eleganckie, ale działa:

<p>&nbsp;</p>
asiniy
źródło
2
@JayKilleen +1 Powinieneś zamieścić to jako odpowiedź. Być może ludzie zaczynają polegać na frameworkach i zapominają o podstawach.
ADJenks
5

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.

ADJenks
źródło
Wadą jest to, że nie uzyskujesz dokładnej kontroli 100px, ale z pewnością powinno działać, aby dodać rozsądną ilość miejsca.
mix3d
1
@ mix3d, jesteś tutaj, na początku nie zauważyłem, że zależało mu na tym, by było to dokładnie 100 pikseli. Myślałem, że chciał tylko „trochę”. Zdecydowanie mógłby stworzyć własną klasę pomocników, jak wszyscy sugerowali. Ale ponieważ ten post ma tyle lat, mógłby teraz po prostu zaktualizować do bootstrap 4, aby uzyskać precyzyjne odstępy, lub pobrać z niego klasy pomocnicze.
ADJenks
5

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>
Sanjeev
źródło
4

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.

John Erck
źródło
Dziękuję, a Twoja sugestia zadziała z Bootstrapem lub bez niego. Ale pytanie dotyczyło w szczególności używania Twitter Bootstrap do dodawania odstępów.
Jonathan
1
<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

Legowisko
źródło
1
Jak to jest odpowiedź na pytanie?
Matt S.
Dodaje odstępy w pionie, o co prosił oryginalny plakat, również deweloperzy bootstrap zajmują się tym teraz w najnowszej wersji (4) w stanie beta. W rzeczywistości jest to poprawna odpowiedź i jeśli wygooglujesz odstępy pionowe w bootstrapie, zobaczysz, że wcześniej nie było to zaspokojone. Nie głosuj negatywnie na rzeczy, których nie testowałeś lub nie szukałeś w Google.
Den
Najwyraźniej nie przeczytałeś pytania. „Chciałbym trochę (100 pikseli) pustego miejsca nad i pod określonym przyciskiem”. Pewien przycisk ... pewien przycisk ...
Matt S,
1
Wcześniej powiedział: „Powiedzmy na przykład”. To był tylko przykład, to nie był konkretny problem. Nie cytuj poza kontekstem. Podany przeze mnie przykład jest obszerny, a wszystkie podane przeze mnie informacje są wystarczające.
Den
-3

Nie ma nic bardziej SUCHEGO niż

.btn {
    margin-bottom:5px;
}
ph7
źródło
13
Odradzałbym modyfikowanie stylu bazowych klas css bootstrap.
James Palawaga
1
@JamesPalawaga +1. Ale jeśli miałby to być ogólny standard w całej Twojej aplikacji, możesz zastąpić styl ładowania początkowego, używając LESS i zmiennych i / lub starannie zarządzanych arkuszy stylów nadpisywania.
Jonathan