Saya yakin ada solusi sederhana untuk masalah ini. Pada dasarnya, jika saya memiliki dua kolom bagaimana saya bisa menambahkan spasi di antara mereka?

mis. jika html adalah:

<div class="col-md-6"></div>
<div class="col-md-6"></div>

Outputnya hanya dua kolom tepat di sebelah satu sama lain mengambil seluruh lebar halaman. Katakanlah lebarnya diatur untuk 1000pxkemudian setiap div akan 500pxlebar.

Jika saya menginginkan 100pxruang di antara keduanya, bagaimana saya bisa mencapai ini? Jelas secara otomatis melalui bootstrap ukuran div akan menjadi 450pxmasing-masing untuk mengimbangi ruang

Anda dapat mencapai jarak antar kolom menggunakan col-md-offset-*kelas, didokumentasikan di sini . Spasi konsisten sehingga semua kolom Anda berbaris dengan benar. Untuk mendapatkan jarak spasi dan ukuran kolom saya akan melakukan hal berikut:

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

Dalam Bootstrap 4 gunakan: offset-2atauoffset-md-2

Saya menghadapi masalah yang sama; dan berikut ini bekerja dengan baik untuk saya. Semoga ini bisa membantu seseorang mendarat di sini:

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

Ini akan secara otomatis memberikan ruang antara 2 div.

Saya tahu saya terlambat ke pesta, tetapi Anda bisa mencoba memberi jarak pada kotak dengan bantalan.

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

Selamat mencoba

Anda dapat menggunakan klip latar belakang dan model kotak dengan proprety batas

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

Saya memiliki masalah serupa dengan ruang antar kolom. Masalah root adalah bahwa kolom dalam bootstrap 3 dan 4 menggunakan padding, bukan margin. Jadi warna latar untuk dua kolom yang berdekatan saling bersentuhan.

Saya menemukan solusi yang sesuai dengan masalah kami dan kemungkinan besar akan bekerja untuk kebanyakan orang yang mencoba spasi kolom dan mempertahankan lebar selokan yang sama dengan sisa dari sistem grid.

Ini adalah hasil akhir yang kami tuju

Memiliki celah dengan bayangan drop antara kolom itu bermasalah. Kami tidak ingin ruang tambahan di antara kolom. Kami hanya ingin talang menjadi "transparan" sehingga warna latar belakang situs akan muncul di antara dua kolom putih.

ini adalah markup untuk dua kolom

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

Pendekatan ini memang membutuhkan div dalam dengan margin negatif seperti menggunakan bootstrap kelas "baris". Dan div ini, kami menyebutnya "blok-terangkat", harus saudara langsung kolom

Dengan cara ini Anda masih mendapatkan bantalan yang tepat di dalam kolom Anda. Saya telah melihat solusi yang tampaknya bekerja dengan menciptakan ruang, tapi sayangnya kolom yang mereka buat memiliki bantalan tambahan di kedua sisi baris sehingga akhirnya membuat baris lebih tipis dari yang dirancang untuk tata letak grid. Jika Anda melihat gambar untuk tampilan yang diinginkan, ini berarti dua kolom bersama-sama akan lebih kecil daripada yang lebih besar di atas yang memecah struktur alami grid.

Kelemahan utama dari pendekatan ini adalah bahwa hal itu membutuhkan markup tambahan yang membungkus konten setiap kolom. Bagi kami ini bekerja karena hanya kolom khusus yang membutuhkan ruang di antara mereka untuk mencapai tampilan yang diinginkan.

Ini akan memungkinkan ruang antara dua kolom dan jelas jika Anda ingin mengubah lebar default, Anda dapat mencari mixin untuk memodifikasi lebar bootstrap default. Atau, Anda bisa memberikan lebar menggunakan gaya CSS sebaris.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>

Anda dapat mencapai jarak antar kolom menggunakan kelas col-xs- *, di dalam kode col-xs- * * di bawah ini. Spasi konsisten sehingga semua kolom Anda berbaris dengan benar. Untuk mendapatkan jarak spasi dan ukuran kolom saya akan melakukan hal berikut:

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

Gunakan .form-groupkelas bootstrap . Seperti ini dalam kasus Anda:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>

Menurut dokumentasi Bootstrap 4 Anda harus memberi orang tua margin negatif mx-n*, dan anak-anak padding positifpx-*

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

Di dalam col-md- ?, buat div lain dan letakkan gambar di div itu, daripada Anda dapat dengan mudah menambahkan padding seperti itu.

<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 , file custom.scss Anda dapat menambahkan kode berikut:

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

secara default $ grid-gutter-width-base: 30px;

Saya harus mencari cara untuk melakukan ini selama 3 kolom. Saya ingin mengitari sudut divs dan tidak bisa mendapatkan ruang untuk bekerja. Saya menggunakan margin. Dalam kasus saya, saya pikir 90% layar harus diisi oleh divs dan 10% untuk margin:

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>

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

Untuk mengubah ukurannya dengan benar untuk perangkat seluler, saya meminta CSS mengubah lebar dari 30% menjadi di width:92.5%;bawah@media (max-width:1023px)

Karena Anda menggunakan bootstrap , saya rasa Anda ingin menjadikannya responsif . Dalam hal ini Anda sebaiknya tidak menggunakan ukuran tetap, dalam 'px' misalnya.

Sebagai solusi untuk solusi lain, saya mengusulkan membuat kedua kolom "col-md-5" alih-alih "col-md-6", dan kemudian di elemen induk "baris" yang berisi kolom, tambahkan kelas "justify-content -between ", yang menempatkan ruang kosong di tengah, seperti yang Anda lihat di doc bootstrap di sini

Solusi ini juga berlaku untuk lebih dari dua kolom menyesuaikan "col-md-x" tentu saja

harap ini membantu;)

itu sederhana .. Anda harus menambahkan solid border kanan, kiri ke col- * dan itu harus berfungsi .. :)

sepertinya ini: 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;
}

Saya tahu posting ini sedikit tanggal tetapi saya berlari ke masalah yang sama ini. Contoh html saya.

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

Untuk membuat ruang di antara grup-grup saya mengalahkan margin bootstrap -15px dalam file site.css saya dengan mengurangi margin negatif sebesar 5.

Inilah yang saya lakukan ...

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

Saya harap ini membantu orang lain.

Saya membutuhkan satu kolom di ponsel dan dua kolom dari tablet tegak ke atas, dengan jarak yang sama di antara keduanya di tengah (juga tanpa bantalan kotak di dalam kolom). Dapat dicapai menggunakan utilitas spasi dan menghilangkan nomor di 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>

Bagaimana kalau hanya menambahkan perbatasan warna yang sama dengan latar belakang menggunakan css? Saya baru dalam hal ini, jadi mungkin ada alasan bagus untuk tidak melakukannya, tetapi terlihat bagus ketika saya mencobanya.

Untuk mendapatkan lebar jarak antar kolom tertentu, kita harus mengatur paddingtata letak Bootstrap standar.

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

Ini akan bermanfaat ..

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

Jika penggunaan ingin menambah atau mengurangi margin lebih lanjut di sisi kanan kotak kemudian cukup mengedit properti margin-kanan dari daftar-item.

output sampel

Perbatasan putih di sekitar elemen bungkus

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

dan pertama + anak terakhir tanpa batas

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

Ini secara default menyediakan beberapa padding di dalam div luar seperti yang Anda butuhkan. Selain itu Anda juga dapat memodifikasi bantalan menggunakan CSS khusus.

Cara Sederhana

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

Bootstrap 4

Dokumentasi mengatakan (di sini ):

Baris adalah pembungkus untuk kolom. Setiap kolom memiliki bantalan horizontal (disebut selokan) untuk mengontrol ruang di antara mereka. Padding ini kemudian dinetralkan pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda disejajarkan secara visual di sisi kiri.

Jadi jawaban yang tepat adalah: set col'padding-left / right sama dengan minus rowmargin-kiri / kanan Anda. Sesederhana itu.

#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 - Pisahkan kolom menggunakan baris bersarang.

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

Buat kelas dan gunakan:

margin: 1,5em .5em; max-width: calc (50% - 1em)! penting;

Dimana 1em pada max-width sama dengan margin kiri / kanan yang ditambahkan bersamaan.

Ini juga salah satu cara untuk melakukannya dan bekerja. Silakan periksa url berikut 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>

Menggunakan margin-left adalah caranya:

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

bekerja dengan sempurna

Dengan versi bootstrap terbaru, Anda dapat menggunakan "kartu"