Jak dodać odstępy między kolumnami w Bootstrap?

202

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 1000pxkażda div była 500pxszeroka.

Jeśli chciałbym mieć 100pxprzestrzeń między nimi, jak mogę to osiągnąć? Oczywiście automatycznie przez bootstrap rozmiary div zmieniłyby się, 450pxaby zrekompensować miejsce

Muhammed Bhikha
źródło

Odpowiedzi:

149

Odstępy między kolumnami można osiągnąć, korzystając z col-md-offset-*klas opisanych w tym miejscu . 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:

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

W Bootstrap 4 użyj: offset-2luboffset-md-2

Ben
źródło
29
zadziałałoby, gdy chcę pozostać przy domyślnych rozmiarach kolumn, a co jeśli chcę określonego rozmiaru odstępów, a nie przesunięcia kolumn?
Muhammed Bhikha,
3
W takim przypadku polecam użycie dostarczonych miksów w celu dostosowania rynien kolumnowych: getbootstrap.com/css/#grid-less - Bootstrap nie robi tego, o co pytasz w pytaniu, nie może „dopasować” szerokości siatki, aby uwzględnić dodatkowe odstępy między nimi, ponieważ są oparte na siatce pikseli.
Ben
2
George - masz do tego klasy kompensacji. Ale jeśli okaże się, że wbudowane rynny są niewystarczające, możesz spróbować skompilować własną wersję bootstrap, od mniejszej lub mniejszej w zależności od twoich preferencji. Następnie możesz zmodyfikować szerokości kolumn i rynien, aby pasowały do ​​Twojej witryny. Dodanie pustych div nie jest naprawdę złe, ważne jest wymyślenie czegoś, z czego ty (i / lub twój zespół) możesz konsekwentnie korzystać; jeśli puste div jest sposobem na osiągnięcie tego, to jest w porządku; pamiętaj, że znaczniki powinny być odczytywane przez programistów, a nie użytkowników końcowych.
Ben
24
Ten post w ogóle nie jest odpowiedzią, tworzy lukę znacznie większą niż zadawano.
Sebastien
2
W Bootstrap 4 jest to offset-md-2 lub offset-2
Mahesh
318

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:

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Spowoduje to automatyczne zwolnienie przestrzeni między 2 divami.

wprowadź opis zdjęcia tutaj

Utpal - Ur Best Pal
źródło
głównie z powodu szerokości rynny.
Utpal - Ur Best Pal
14
„szerokości rynny” odnoszą się do odstępów w wypełnieniu i marginesach zdefiniowanych w rdzeniu systemu siatki bootstrap. Krótko mówiąc, dodanie drugiego div z col-xs-12jest tym samym, co dodanie div zwidth:100%; padding:0px 15x;
mix3d 12.04.16
@ sixty4bit możesz udostępnić swój kod; może mogę ci pomóc.
Utpal - Ur Best Pal
to byłoby świetne @ Utpal-UrBestPal, dzięki! oto sedno: gist.github.com/davidcpell/8d344ff18d5d188115c0ff9ba6ef7d14
sixty4bit
2
Jeśli używasz tej poprawki i nie działa, przeczytaj, dlaczego działa ona w wyjaśnieniu @ mix3d, a zrozumiesz, co robisz źle.
MauF
73

Wiem, że jestem spóźniony na przyjęcie, ale możesz spróbować rozstawić pudełka z wypełnieniem.

<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
        <div class="inner">Hello</div>
</div>

CSS:

.box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

Spróbuj tego

Robin Jonsson
źródło
Nie do końca, ponieważ nie możesz row-eq-heightz tym korzystać
Greg Woz
13

możesz użyć klipu tła i modelu pudełkowego z obramowaniem

.box{
  box-model: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}
<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>
Ali El Habchi
źródło
13

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

wprowadź opis zdjęcia tutaj

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

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

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.

Joe Fitzgibbons
źródło
11

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.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
Amit
źródło
4
Semant tego nie jest dokładnie tym, o co pyta @Muhammed. Dodajesz zmianę w kolejności kolumn za pomocą przeciągnij w lewo, przeciągnij w prawo.
Luchux
9

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:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>
Użytkownik_3535
źródło
6

Użyj .form-groupklasy bootstrap . Tak jak w twoim przypadku:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
S ..
źródło
1
Jak przydatny może być margines dolny?
Elisabeth
12
Celowo zalogowałem się, aby nie lubić tego hacka.
szdrnja
13
Celowo zalogowałem się tylko po to, aby głosować na Twój komentarz na temat celowego logowania, aby nie lubić tego hacka.
Adam Spiers
Celowo zalogowałem się tylko po to, aby głosować za twoim komentarzem na temat celowego logowania, tylko po to, aby głosować za komentarzem o celowym logowaniu się, aby nie lubić tego hacka.
Czarny
5

Zgodnie z dokumentacją Bootstrap 4 powinieneś dać rodzicowi ujemny margines mx-n*, a dzieciom pozytywne wypełnieniepx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

estani
źródło
Dla mnie najlepsze (pionowe odstępy między rzędami) były <div class="row mt-n4">i <div class="col-3 pt-4">.
Gavin
4

Wewnątrz col-md-? Utwórz kolejny div i umieść w nim obrazek, niż możesz łatwo dodać dopełnienie.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>
Farac
źródło
4

Bootstrap 4 , plik custom.scss, możesz dodać następujący kod:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

domyślnie $ grid-gutter-width-base: 30px;

Ivan Djordevic
źródło
1
czy mógłbyś to rozwinąć? to nie działa dla mnie
Selva Ganapathi
2
@SelvaGanapathi musisz ponownie skompilować po zmianie tych zmiennych: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb 6'18
W Bootstrap 4 jest to offset-md-2 lub offset-2
Mahesh
2

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:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

i CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

Aby poprawnie zmienić rozmiar dla urządzeń mobilnych, kazałem CSS zmienić szerokość z 30% na width:92.5%;mniejszą@media (max-width:1023px)

Laser One Jim
źródło
2

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 ;)

Hugo
źródło
1

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:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
Mohamed Ahmed
źródło
8
nie używasz wielu identyfikatorów na tej samej stronie, to kompletny brak wiedzy o tym, jak używać css. Zamiast tego używaj klas.
LowFieldTheory,
1

Wiem, że ten post jest trochę przestarzały, ale napotkałem ten sam problem. Przykład mojego html.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

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 ...

.form-group {
    margin-right: -10px;
}

Mam nadzieję, że to pomoże komuś innemu.

Mark Libner
źródło
1

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:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>
drvictor666
źródło
0

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.

Brian
źródło
5
Witamy w przepełnieniu stosu. Jeśli potrzebujesz więcej informacji lub wyjaśnień na pytanie, użyj komentarzy zamiast odpowiedzi.
β.εηοιτ.βε
Gdyby tło używało obrazu / tekstury zamiast jednolitego koloru, byłoby to oczywiste.
Charles Watson,
0

Aby uzyskać określoną szerokość odstępów między kolumnami, musimy ustawić paddingw standardowym układzie Bootstrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}
<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>

Gleb Kemarsky
źródło
0

Będzie to przydatne ..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

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

wprowadź opis zdjęcia tutaj

arulraj
źródło
0

Tylko biała ramka wokół elementu owijającego

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

i pierwsze + ostatnie dziecko bez granicy

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>
Jakub Stejskal
źródło
0
    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}
RITHIN K
źródło
2
Trochę prozy o tym, co i dlaczego może być pomocne.
Uwe Allner,
0
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

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.

Akshay R.
źródło
0

Prosta droga

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
Vladislav Koshenevskiy
źródło
0

Bootstrap 4

Dokumentacja mówi ( tutaj ):

Wiersze są opakowaniami do kolumn. Każda kolumna ma poziomą wyściółkę (zwaną rynną) do kontrolowania przestrzeni między nimi. To wypełnienie jest następnie przeciwdziałane w wierszach z ujemnymi marginesami. W ten sposób cała zawartość twoich kolumn jest wizualnie wyrównana w dół po lewej stronie.

Tak więc prawidłowa odpowiedź to: ustaw colmargines lewy / prawy równy minus rowmargines lewy / prawy. Tak proste.

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Demo: https://codepen.io/frouo/pen/OqGaWN

col z niestandardowymi odstępami

frouo
źródło
0

wprowadź opis zdjęcia tutaj

Bootstrap 4 - Oddziel kolumny za pomocą zagnieżdżonych wierszy.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

źródło
Może użycie odpowiedzi dostarczonej przez @estani jest bardziej „klasycznym” sposobem na zrobienie tego z bootstrap4?
sodimel
0

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.

WebDude0482
źródło
-1

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/

<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>
Sarfaraz Kasmani
źródło
-2

Używanie marginesu po lewej to sposób:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

działa świetnie

alanh
źródło
Nie, to nie psuje reakcji.
Crasher