Jak zwiększyć dopełnienie między kolumnami za pomocą Bootstrap 3.0

Jestem stosunkowo nowy w programowaniu i robię stronę internetową za pomocą programu startowego 3.0.Jak zwiększyć dopełnienie między kolumnami za pomocą Bootstrap 3.0

Chcę zrobić dwa wiersze, które znajdują się pośrodku strony. W pierwszym rzędzie użyłem div class="col-md-4 col-md-offset-2" i dla drugiego rzędu div class="col-md-4".

Moje pierwsze pytanie brzmi: czy to dobrze, że to daje 10 rzędów zamiast 12, czy też muszę podać 2 rzędy po prawej? Jeśli tak, jak można to zrobić?

Chciałbym również zwiększyć poziomy odstęp między kolumnami. Zrobiłem trochę badań na ten temat i natknąłem się na mixiny, ale trudno było mi je zrozumieć. Jeśli ktokolwiek tutaj może zapewnić mi prosty sposób na zwiększenie horyzontalnego odstępu między dwiema kolumnami, które byłoby świetne.

Z góry dziękuję.

Źródło

2014-07-01 Stijn

Trochę zagmatwany, ale wygląda na to, że chcesz mieć dwa rzędy na środku ekranu, a jednocześnie kilka wyściółek między rzędami? Ponadto, gdy mówisz "wiersz" masz na myśli kolumny powodują, że 'col-md' jest dla kolumn i nie tworzy wierszy! –

Quest ion 1: Tak, dobrze jest zostawić zwisającą przestrzeń po kolumnach, ale dobrą praktyką jest związanie tego po zamknięciu .row po tym.

Pytanie 2: Możesz dodać margines do lewej i prawej strony kolumny. Ale to zrzuca kolumnę z przesunięciem, więc obejść to, umieszczając przed nimi pusty .col-md-2.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-2"></div><!-- empty --> 
    <div class="col-md-4 margin">col-md-4</div> 
    <div class="col-md-4 margin">col-md-4</div> 
    </div> 
</div>

CSS:

.margin { 
    margin-left:10px; 
    margin-right:10px; 
    }

Demo: http://www.bootply.com/OS6FX9sie8#

Ponadto, można zauważyć w moim demo umieścić klasę niestandardową w media-zapytania. Zrób to, jeśli chcesz, aby to ustawienie marginesów było stosowane tylko na urządzeniach z dużym ekranem, aby kolumny osiągały krawędź ekranu na telefonach.

Źródło

2014-07-02 04:49:01

Dzięki Shawn, to jest dokładne rozwiązanie mojego problemu. – Stijn

świetnie! zwykły SOP to zaakceptować (sprawdzić) i być może dać +1 odpowiedź, gdy wszystko jest dobrze :) –

wygląda to, co chcesz

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-md-offset-2">col-md-4-offset</div> 
     <div class="col-md-4">col-md-4</div> 
    </div> 
</div>

jej perfekcyjnie mieć kolumna nie sumują się do 12

Oto bootply

i jeśli chcesz pad tylko twoje wiersze dodać dopełnienie do .row klasy domyślnie nie ma wyściółka lub marginesy pomiędzy rzędami

Źródło

2014-07-01 19:58:01

Jak zwiększyć dopełnienie między kolumnami za pomocą Bootstrap 3.0

Odpowiedz

Powiązane problemy