(bootstrap) Zachowanie odstępu między elementami podczas ich zawijania?

Question

Używając Bootstrap, gdy umieszczam w rzędzie kilka elementów (np. Przycisków) i zmniejszam okno, elementy zawijają się.

Ale gdy między oknami jest pewna przestrzeń pozioma, gdy okno jest wystarczająco szerokie, aby pomieścić wszystko obok siebie, w pionie wszystko utknie w miejscu, z zerowymi pikselami pustego odstępu między.

Live example (wąski lub poszerzyć okno wyjściowe, aby zobaczyć efekt)

przykład zrzut ekranu:
1. Wide enough, notice space between buttons
2. Wrapping around, notice NO space between the buttons stacked on top of eachother

Chyba mógł poeksperymentować z jakimś niestandardowym CSS, dodając marginesy pionowe lub inne, ale w celu zachowania zgodności i standardu, jak to możliwe, zastanawiam się, czy istnieje lepszy lub bardziej natywny sposób naprawienia tego w układzie Bootstrap?

Answer 1

Co się dzieje tutaj jest przyciski są wyświetlane w bloku inline i domyślnie takie elementy nie mają spacje lub margines na początku. Możesz użyć poniższej metody, aby tego uniknąć.

To, co zrobiłem, to dodanie klasy do elementu nadrzędnego przycisków i dziedziczenie stylu do klasy "btn".

html

<div class='container'> 
    <div class='row'> 
     <div class='col-xs-12 button-wrapper'> 
      <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button> 
      <button class='btn btn-info'>consectetur adipiscing elit</button> 
      <button class='btn btn-success'>sed do eiusmod tempor incididunt</button> 
     </div> 
    </div> 
</div> 

css

.button-wrapper .btn { 
    margin-bottom:5px; 
} 

Demo

Answer 2

Demo Użyj marży-bottom css dla przycisku.

.btn{margin-bottom:10px;} 

U można napisać to css z nową nazwą klasy nadrzędnej, aby uniknąć wpływu css na inne strony.

Answer 3

Spróbuj tak: Demo

CSS:

@media (max-width: 779px) { 
    .btn{ 
     margin-bottom:10px; 
} 

Answer 4

Sprawdź przykładowe poniżej:

Kod:

.btn { 
 
    margin: 10px auto; 
 
}

<div class='container'> 
 
\t <div class='row'> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-primary">Lorem ipsum dolor sit amet</button> 
 
     </div> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-info">consectetur adipiscing elit</button> 
 
     </div> 
 
     
 
     <div class="col-xs-12 col-sm-4"> 
 
      <button class="btn btn-block btn-success">sed do eiusmod tempor incididunt</button> 
 
     </div>   
 
     
 
\t </div> 
 
</div>

Example

Answer 5

Z Bootstrap, zawsze chcą, aby zajęcia dodawania górny i dolny margines tak:

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

.bottom5 { margin-bottom:5px; } 
.bottom7 { margin-bottom:7px; } 
.bottom10 { margin-bottom:10px; } 
.bottom15 { margin-bottom:15px; } 
.bottom17 { margin-bottom:17px; } 
.bottom30 { margin-bottom:30px; } 

Jest łatwy do zapamiętania i stanowi szybkie rozwiązanie tego problemu. Po prostu dodaj do pliku main.css.

Answer 6

Używam tej metody: dodać div z pewnym pionowej przestrzeni:

<div class="vspace1em"></div> 

css:

div.vspace1em { 
     clear: both; 
     height: 1em; 
    }