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

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

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.

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

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>

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

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

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>

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

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>

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>

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;

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)

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

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

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.

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>

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.

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>

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

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>

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

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

Prosta droga

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

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

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>

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.

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>

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

W najnowszej wersji bootstrap możesz używać „kart”