Bu sorunun basit bir çözümü olduğundan eminim. Temel olarak, iki sütunum varsa aralarına nasıl boşluk ekleyebilirim?

html ise:

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

Çıktı, sayfanın tüm genişliğini kaplayacak şekilde yan yana iki sütun olacaktı. Genişliğin şu şekilde ayarlandığını 1000pxvarsayalım ki her div 500pxgeniş olur.

Eğer 100pxikisi arasında bir boşluk isteseydim bunu nasıl başarabilirim? Açıkçası bootstrap aracılığıyla otomatik olarak div boyutları 450px, alanı telafi etmek için her biri olur

col-md-offset-*Burada belgelenen sınıfları kullanarak sütunlar arasında boşluk elde edebilirsiniz . Boşluk tutarlıdır, böylece tüm sütunlarınız doğru bir şekilde hizalanır. Eşit aralık ve sütun boyutu elde etmek için aşağıdakileri yaparım:

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

Bootstrap 4'te şunları kullanın: offset-2veyaoffset-md-2

Aynı sorunla karşı karşıyaydım; ve aşağıdakiler benim için iyi çalıştı. Umarım bu kişi buraya iniş yapar:

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

Bu otomatik olarak 2 div arasında bir miktar boşluk oluşturur.

Partiye geç kaldığımı biliyorum, ama kutuları dolgu ile aralamayı deneyebilirsiniz.

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

Bir bakalım

arka plan klibi ve kutu modelini kenarlık özelliği ile kullanabilirsiniz

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

Sütunlar arasındaki boşlukla benzer sorunlar yaşadım. Temel sorun, bootstrap 3 ve 4'teki sütunların kenar boşluğu yerine dolgu kullanmasıdır. İki bitişik sütun için arka plan renkleri birbirine temas eder.

Sorunumuza uyan bir çözüm buldum ve büyük olasılıkla sütunları boşluklandırmaya ve ızgara sisteminin geri kalanıyla aynı oluk genişliklerini korumaya çalışan çoğu insan için işe yarayacak.

Bu bizim için son sonucuydu

Sütunlar arasında gölge olan boşluğa sahip olmak sorunluydu. Sütunlar arasında fazladan boşluk istemedik. Sadece olukların "şeffaf" olmasını istedik, böylece sitenin arka plan rengi iki beyaz sütun arasında görünecektir.

bu iki sütun için biçimlendirme

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

Bu yaklaşım, tıpkı "row" sınıfı bootstrap'in kullandığı gibi negatif kenar boşluklarına sahip bir içsel div gerektirir. Ve "yükseltilmiş blok" olarak adlandırdığımız bu div, bir sütunun doğrudan kardeşi olmalı

Bu şekilde, sütunlarınızda hala uygun dolgu elde edersiniz. Alan yaratarak işe yarayan çözümler gördüm, ancak maalesef oluşturdukları sütunlar satırın her iki tarafında ekstra dolguya sahipler, böylece satırın ızgara düzeninin tasarlandığını daha ince hale getiriyorlar. İstenilen görünüm için görüntüye bakarsanız, bu iki sütunun birlikte ızgaranın doğal yapısını kıran daha büyük olandan daha küçük olacağı anlamına gelir.

Bu yaklaşımın en büyük dezavantajı, her bir sütunun içeriğini sarmak için ek işaretleme gerektirmesidir. Bu bizim için işe yarıyor çünkü istenen görünümü elde etmek için sadece belirli sütunlar aralarında boşluk gerekiyordu.

Bu, iki sütun arasında bir boşluğa izin verir ve varsayılan genişliği değiştirmek isterseniz, varsayılan önyükleme genişliğini değiştirmek için mixins için gidebilirsiniz. Veya satır içi CSS stilini kullanarak genişliği verebilirsiniz.

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

Aşağıda kodlanan bir col-xs- * div içinde col-xs- * sınıflarını kullanarak sütunlar arasında boşluk elde edebilirsiniz. Boşluk tutarlıdır, böylece tüm sütunlarınız doğru bir şekilde hizalanır. Eşit aralık ve sütun boyutu elde etmek için aşağıdakileri yaparım:

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

Bootstrap .form-groupsınıfını kullanın . Sizin durumunuzda böyle:

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

Bootstrap 4 belgelerine göre , ebeveyne negatif bir marj vermelisiniz mx-n*ve çocuklar olumlu bir dolgu yapmalıdır.px-*

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

Col-md-? İçinde başka bir div oluşturun ve bu div içine resim koyun, böylece kolayca dolgu ekleyebilirsiniz.

<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 , custom.scss dosyası ile aşağıdaki kodu ekleyebilirsiniz:

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

varsayılan olarak $ grid-gutter-width-base: 30 piksel;

Bunu 3 sütun için nasıl yapacağımı bulmak zorundaydım. Divanın köşelerini yuvarlamak istedim ve işe yarayacak boşluğu alamadım. Kenar boşlukları kullandım. Benim durumumda ekranın% 90'ının div'ler tarafından doldurulacağını ve% 10'unun kenar boşlukları için olduğunu düşündüm:

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>

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

Mobil cihazlar için doğru yeniden boyutlandırmak yapmak için CSS% 30 den genişliğini değiştirmek zorunda width:92.5%;under@media (max-width:1023px)

Kullandığınız beri ön yükleme alanı , sana bir şey yapmak istiyorum tahmin duyarlı . Bu durumda, örneğin 'px'de sabit boyutlar kullanmamalısınız.

Diğer çözümlere geçici bir çözüm olarak, her iki sütunu "col-md-6" yerine "col-md-5" yapmayı ve ardından sütunları içeren "satır" üst öğesinde "justify-content" sınıfını eklemeyi öneririm -between ", burada boş alanı ortaya koyar, burada bootstrap dokümanı kontrol edebilirsiniz

Bu çözüm, "col-md-x" ayarını yapan ikiden fazla sütun için de geçerlidir

Umarım yardımcı olur ;)

Bu basit .. Sağ kenar, sağa col- * eklemek zorunda ve işe yaraması gerekir .. :)

şuna benzer: 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;
}

Bu yazının biraz tarihli olduğunu biliyorum ama aynı soruna koştum. Html örneğim.

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

Gruplar arasında boşluk oluşturmak için site.css dosyamdaki bootstrap'in -15px'lik kenar boşluğunu negatif kenar boşluğunu 5 azaltarak geçersiz kıldım.

İşte yaptığım şey ...

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

Umarım bu başka birine yardımcı olur.

Mobilde bir sütuna ve tablet dikeyden iki sütuna, aralarında eşit aralıklarla (sütunlar içinde ızgara eklenmiş dolgu olmadan) ihtiyacım vardı. Boşluk yardımcı programları kullanılarak ve sayının aşağıdaki sayıdan çıkarılmasıyla gerçekleştirilebilir 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>

Sadece css kullanarak arka planla aynı renkte bir kenarlık eklemeye ne dersiniz? Bu konuda yeniyim, belki de yapmamak için iyi bir neden var, ama denediğimde iyi görünüyordu.

Sütunlar arasında belirli bir boşluk genişliği elde etmek paddingiçin standart Önyükleme düzeninde ayarlamamız gerekir .

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

Bu faydalı olacaktır.

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

Kullanım kutunun sağ tarafında daha fazla kenar boşluğu artırmak veya azaltmak istiyorsanız, liste öğesinin sağ kenar boşluğu özelliğini düzenlemeniz yeterlidir.

örnek çıktı

Sarma öğesinin etrafında sadece beyaz kenarlık

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

ve ilk + son çocuğa sınır yok

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

Bu, varsayılan olarak, dış div içinde ihtiyaç duyduğunuz şekilde bir dolgu sağlar. Ayrıca özel CSS kullanarak doldurmayı da değiştirebilirsiniz.

Basit yol

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

Bootstrap 4

Belgeler diyor ki ( burada ):

Satırlar sütunlar için sarmalayıcılardır. Her sütun, aralarındaki boşluğu kontrol etmek için yatay dolguya (oluk denir) sahiptir. Bu dolgu daha sonra negatif kenar boşluklarına sahip satırlara karşı koyar. Bu şekilde, sütunlarınızdaki tüm içerik görsel olarak sol tarafa hizalanır.

Bu yüzden doğru cevap: cols 'dolgusu-sol / sağını eksi row' sol / sağ kenar boşluğuna eşit olacak şekilde ayarlayın . Bu kadar basit.

#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 - İç içe satırları kullanarak sütunları ayırın.

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

Bir sınıf oluşturun ve kullanın:

kenar boşluğu: 1.5em .5em; max-width: calc (% 50 - 1em)! önemli;

Maks. Genişlikteki 1em, birlikte eklenen sol / sağ kenar boşluğuna eşittir.

Bu da onu ve çalışmalarını yapmanın bir yolu. Lütfen aşağıdaki URL'yi kontrol edin 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>

Sol kenar boşluğunu kullanmak şu şekilde olur:

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

Mükemmel çalışıyor

En son bootstrap sürümü ile "kartları" kullanabilirsiniz