Jestem pewien, że istnieje proste rozwiązanie tego problemu. Zasadniczo, jeśli mam dwie kolumny, jak mogę dodać spację między nimi?
np. jeśli HTML to:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Wynikiem byłyby po prostu dwie kolumny obok siebie, zajmujące całą szerokość strony. Powiedzmy, że szerokość została ustawiona na tak, aby 1000px
każda div była 500px
szeroka.
Jeśli chciałbym mieć 100px
przestrzeń między nimi, jak mogę to osiągnąć? Oczywiście automatycznie przez bootstrap rozmiary div zmieniłyby się, 450px
aby zrekompensować miejsce
źródło
Miałem do czynienia z tym samym problemem; a następujące działały dla mnie dobrze. Mam nadzieję, że to pomoże komuś lądować tutaj:
Spowoduje to automatyczne zwolnienie przestrzeni między 2 divami.
źródło
col-xs-12
jest tym samym, co dodanie div zwidth:100%; padding:0px 15x;
Wiem, że jestem spóźniony na przyjęcie, ale możesz spróbować rozstawić pudełka z wypełnieniem.
CSS:
Spróbuj tego
źródło
row-eq-height
z tym korzystaćmożesz użyć klipu tła i modelu pudełkowego z obramowaniem
źródło
Miałem podobne problemy z odstępem między kolumnami. Problem polega na tym, że kolumny w bootstrap 3 i 4 używają wypełnienia zamiast marginesu. Tak więc kolory tła dla dwóch sąsiednich kolumn stykają się ze sobą.
Znalazłem rozwiązanie, które pasuje do naszego problemu i najprawdopodobniej zadziała dla większości ludzi próbujących rozmieścić kolumny i zachować te same szerokości rynny, co reszta systemu siatki.
To był końcowy rezultat, na który zamierzaliśmy
Problemem było posiadanie odstępu z cieniem między kolumnami. Nie chcieliśmy dodatkowej przestrzeni między kolumnami. Chcieliśmy tylko, aby rynny były „przezroczyste”, aby kolor tła witryny pojawił się między dwiema białymi kolumnami.
to jest znacznik dla dwóch kolumn
CSS
To podejście wymaga wewnętrznego div z ujemnymi marginesami, podobnie jak w przypadku bootstrap klasy „row”. I ten div, który nazwaliśmy „podniesionym blokiem”, musi być bezpośrednim rodzeństwem kolumny
W ten sposób nadal masz odpowiednie wypełnienie w swoich kolumnach. Widziałem rozwiązania, które wydają się działać, tworząc przestrzeń, ale niestety kolumny, które tworzą, mają dodatkowe wypełnienie po obu stronach wiersza, co powoduje, że wiersz jest cieńszy, dla którego zaprojektowano układ siatki. Jeśli spojrzysz na obraz w celu uzyskania pożądanego wyglądu, oznaczałoby to, że dwie kolumny razem byłyby mniejsze niż ta większa na górze, która łamie naturalną strukturę siatki.
Główną wadą tego podejścia jest to, że wymaga dodatkowego znacznika owijania zawartości każdej kolumny. Dla nas to działa, ponieważ tylko określone kolumny potrzebowały przestrzeni między nimi, aby osiągnąć pożądany wygląd.
źródło
Pozwoli to na spację między dwiema kolumnami i oczywiście, jeśli chcesz zmienić domyślną szerokość, możesz przejść do miksów, aby zmodyfikować domyślną szerokość ładowania początkowego. Lub możesz podać szerokość za pomocą wbudowanego stylu CSS.
źródło
Odstępy między kolumnami można uzyskać za pomocą klas col-xs- *, w ramach div col-xs- * zakodowanego poniżej. Odstępy są spójne, dzięki czemu wszystkie kolumny są prawidłowo ustawione. Aby uzyskać równe odstępy i rozmiar kolumny, zrobiłbym następujące czynności:
źródło
Użyj
.form-group
klasy bootstrap . Tak jak w twoim przypadku:źródło
Zgodnie z dokumentacją Bootstrap 4 powinieneś dać rodzicowi ujemny margines
mx-n*
, a dzieciom pozytywne wypełnieniepx-*
źródło
<div class="row mt-n4">
i<div class="col-3 pt-4">
.Wewnątrz col-md-? Utwórz kolejny div i umieść w nim obrazek, niż możesz łatwo dodać dopełnienie.
źródło
Bootstrap 4 , plik custom.scss, możesz dodać następujący kod:
domyślnie $ grid-gutter-width-base: 30px;
źródło
Musiałem wymyślić, jak to zrobić dla 3 kolumn. Chciałem zaokrąglić rogi div i nie mogłem uzyskać odstępów do pracy. Użyłem marginesów. W moim przypadku doszedłem do wniosku, że 90% ekranu będzie wypełnione przez divs, a 10% dla marginesów:
HTML:
i CSS:
Aby poprawnie zmienić rozmiar dla urządzeń mobilnych, kazałem CSS zmienić szerokość z 30% na
width:92.5%;
mniejszą@media (max-width:1023px)
źródło
Ponieważ używasz bootstrapu , myślę, że chcesz sprawić, aby ta rzecz była responsywna . W takim przypadku nie należy używać stałych rozmiarów, na przykład w „px”.
Aby obejść inne rozwiązania, proponuję zrobić obie kolumny „col-md-5” zamiast „col-md-6”, a następnie w elemencie nadrzędnym „row”, który zawiera kolumny, dodać klasę „justify-content -between ”, który umieszcza wolne miejsce na środku, ponieważ możesz sprawdzić tutaj dokument bootstrap
To rozwiązanie jest również ważne dla więcej niż dwóch kolumn dostosowujących oczywiście „col-md-x”
mam nadzieję, że to pomoże ;)
źródło
to proste .. musisz dodać solidne obramowanie w prawo, od lewej do col- * i powinno działać. :)
wygląda to tak: http://i.stack.imgur.com/CF5ZV.png
HTML:
CSS:
źródło
Wiem, że ten post jest trochę przestarzały, ale napotkałem ten sam problem. Przykład mojego html.
Aby stworzyć przestrzeń między grupami, przesłoniłem margines bootstrap -15px w moim pliku site.css, zmniejszając ujemny margines o 5.
Oto co zrobiłem ...
Mam nadzieję, że to pomoże komuś innemu.
źródło
Potrzebowałem jednej kolumny na telefonie komórkowym i dwóch kolumn od pionowego tabletu w górę, z równymi odstępami między nimi na środku (również bez dodatkowej siatki wewnątrz kolumn). Można to osiągnąć za pomocą narzędzi do rozmieszczania i pomijając liczbę w
col-md
:źródło
A może po prostu dodasz ramkę tego samego koloru co tło za pomocą css? Jestem nowy w tym, więc może jest dobry powód, aby tego nie robić, ale wyglądało to dobrze, kiedy próbowałem.
źródło
Aby uzyskać określoną szerokość odstępów między kolumnami, musimy ustawić
padding
w standardowym układzie Bootstrap.źródło
Będzie to przydatne ..
Jeśli chcesz zwiększyć lub zmniejszyć margines po prawej stronie pola, po prostu edytuj właściwość marginesu po prawej stronie elementu listy.
próbka wyjściowa
źródło
Tylko biała ramka wokół elementu owijającego
i pierwsze + ostatnie dziecko bez granicy
źródło
źródło
To domyślnie zapewnia wypełnienie w zewnętrznej części div tak, jak ci się wydaje. Ponadto można również modyfikować wypełnienie za pomocą niestandardowego CSS.
źródło
Prosta droga
źródło
Bootstrap 4
Dokumentacja mówi ( tutaj ):
Tak więc prawidłowa odpowiedź to: ustaw
col
margines lewy / prawy równy minusrow
margines lewy / prawy. Tak proste.Demo: https://codepen.io/frouo/pen/OqGaWN
źródło
Bootstrap 4 - Oddziel kolumny za pomocą zagnieżdżonych wierszy.
źródło
Utwórz klasę i użyj:
margines: 1,5 em. 5 em; max-width: calc (50% - 1em)! ważne;
Gdzie 1em na maksymalnej szerokości jest równy lewemu / prawemu marginesowi sumowanemu razem.
źródło
To także jeden ze sposobów na zrobienie tego i jego dzieł. Proszę sprawdzić następujący adres URL https://jsfiddle.net/sarfarazk/ofgqm0sh/
źródło
Używanie marginesu po lewej to sposób:
działa świetnie
źródło
W najnowszej wersji bootstrap możesz używać „kart”
źródło