Tôi chắc chắn có một giải pháp đơn giản cho vấn đề này. Về cơ bản, nếu tôi có hai cột, làm thế nào tôi có thể thêm khoảng trắng giữa chúng?

ví dụ: nếu html là:

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

Đầu ra chỉ đơn giản là hai cột ngay cạnh nhau chiếm toàn bộ chiều rộng của trang. Giả sử chiều rộng được đặt thành 1000pxsau đó mỗi div sẽ 500pxrộng.

Nếu tôi muốn có một 100pxkhông gian giữa hai người, làm thế nào tôi có thể đạt được điều này? Rõ ràng là tự động thông qua bootstrap, các kích thước div sẽ trở thành 450pxmỗi kích thước để bù cho khoảng trống

Bạn có thể đạt được khoảng cách giữa các cột bằng cách sử dụng các col-md-offset-*lớp, được ghi lại ở đây . Khoảng cách là nhất quán để tất cả các cột của bạn xếp hàng chính xác. Để có được khoảng cách và kích thước cột, tôi sẽ làm như sau:

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

Trong Bootstrap 4, sử dụng: offset-2hoặcoffset-md-2

Tôi đã phải đối mặt với cùng một vấn đề; và sau đây làm việc tốt cho tôi. Hy vọng điều này sẽ giúp ai đó hạ cánh ở đây:

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

Điều này sẽ tự động kết xuất một số không gian giữa 2 div.

Tôi biết tôi đến bữa tiệc muộn, nhưng bạn có thể thử cách các hộp với phần đệm.

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

Có một đi

bạn có thể sử dụng clip nền và mô hình hộp với đường viền

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

Tôi đã có vấn đề tương tự với không gian giữa các cột. Vấn đề gốc là các cột trong bootstrap 3 và 4 sử dụng phần đệm thay vì lề. Vì vậy, màu nền cho hai cột liền kề chạm vào nhau.

Tôi đã tìm thấy một giải pháp phù hợp với vấn đề của chúng tôi và rất có thể sẽ hiệu quả với hầu hết mọi người đang cố gắng giữ các cột không gian và duy trì độ rộng máng xối giống như phần còn lại của hệ thống lưới.

Đây là kết quả cuối cùng chúng tôi sẽ cho

Có khoảng cách với bóng đổ giữa các cột là vấn đề. Chúng tôi không muốn có thêm không gian giữa các cột. Chúng tôi chỉ muốn máng xối "trong suốt" để màu nền của trang web sẽ xuất hiện giữa hai cột trắng.

đây là đánh dấu cho hai cột

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

Cách tiếp cận này đòi hỏi một div bên trong có lề âm giống như cách sử dụng bootstrap của lớp "hàng". Và div này, chúng tôi gọi nó là "khối nâng cao", phải là anh chị em trực tiếp của một cột

Bằng cách này bạn vẫn có được phần đệm thích hợp bên trong các cột. Tôi đã thấy các giải pháp có vẻ hoạt động bằng cách tạo không gian, nhưng thật không may, các cột mà chúng tạo ra có thêm phần đệm ở hai bên của hàng để cuối cùng làm cho hàng mỏng hơn mà bố cục lưới được thiết kế. Nếu bạn nhìn vào hình ảnh để có cái nhìn mong muốn, điều này có nghĩa là hai cột với nhau sẽ nhỏ hơn cột lớn hơn ở trên cùng, phá vỡ cấu trúc tự nhiên của lưới.

Hạn chế chính của phương pháp này là nó yêu cầu đánh dấu thêm bao bọc nội dung của từng cột. Đối với chúng tôi điều này hoạt động vì chỉ có các cột cụ thể cần không gian giữa chúng để đạt được giao diện mong muốn.

Điều này sẽ cho phép một khoảng trắng giữa hai cột và rõ ràng nếu bạn muốn thay đổi độ rộng mặc định, bạn có thể dùng mixins để sửa đổi độ rộng bootstrap mặc định. Hoặc, bạn có thể cung cấp chiều rộng bằng cách sử dụng kiểu CSS nội tuyến.

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

Bạn có thể đạt được khoảng cách giữa các cột bằng các lớp col-xs- *, trong một col-xs- * div được mã hóa bên dưới. Khoảng cách là nhất quán để tất cả các cột của bạn xếp hàng chính xác. Để có được khoảng cách và kích thước cột, tôi sẽ làm như sau:

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

Sử dụng .form-grouplớp của bootstrap . Như thế này trong trường hợp của bạn:

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

Theo tài liệu của Bootstrap 4, bạn nên cho cha mẹ một mức âm mx-n*và cho con cái một phần đệm tích cựcpx-*

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

Bên trong col-md-?, Tạo một div khác và đặt ảnh vào div đó, hơn là bạn có thể dễ dàng thêm phần đệm như vậy.

<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 , tập tin custom.scss bạn có thể thêm mã sau đây:

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

theo mặc định $ lưới-gutter-width-base: 30px;

Tôi đã phải tìm ra cách để làm điều này trong 3 cột. Tôi muốn làm tròn các góc của div và không thể có khoảng cách để làm việc. Tôi đã sử dụng lề. Trong trường hợp của tôi, tôi đã tìm ra 90% màn hình được điền bởi các div và 10% cho lề:

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>

và 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%;
}

Để làm cho nó thay đổi kích thước một cách chính xác cho các thiết bị di động, tôi đã có CSS thay đổi chiều rộng từ 30% đến width:92.5%;dưới@media (max-width:1023px)

Vì bạn đang sử dụng bootstrap , tôi đoán bạn muốn làm cho điều đó trở nên nhanh nhạy . Trong trường hợp đó, bạn nên sử dụng các kích thước cố định, ví dụ: 'px'.

Để khắc phục các giải pháp khác, tôi đề xuất tạo cả hai cột "col-md-5" thay vì "col-md-6", và sau đó trong phần tử "hàng" chứa các cột, thêm lớp "nội dung biện minh -b between ", đặt không gian trống ở giữa, vì bạn có thể kiểm tra tài liệu bootstrap tại đây

Giải pháp này cũng hợp lệ cho hơn hai cột điều chỉnh "col-md-x" tất nhiên

hy vọng nó giúp ;)

thật đơn giản .. bạn phải thêm đường viền phải, trái sang col- * và nó sẽ hoạt động .. :)

nó trông như thế này: 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;
}

Tôi biết bài đăng này là một ngày ít nhưng tôi gặp vấn đề tương tự. Ví dụ về html của tôi.

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

Để tạo khoảng trống giữa các nhóm, tôi đã vượt qua lề -15px của tệp bootstrap trong tệp site.css của mình bằng cách giảm lề âm xuống 5.

Đây là những gì tôi đã làm ...

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

Tôi hy vọng điều này sẽ giúp người khác.

Tôi cần một cột trên thiết bị di động và hai cột từ chân dung máy tính bảng trở lên, với khoảng cách bằng nhau giữa chúng ở giữa (cũng không có bất kỳ phần đệm nào được thêm vào lưới bên trong các cột). Có thể đạt được bằng cách sử dụng các tiện ích khoảng cách và bỏ qua số trong 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>

Làm thế nào về việc chỉ thêm một đường viền cùng màu với nền bằng css? Tôi chưa quen với điều này, vì vậy có lẽ có một lý do chính đáng để không, nhưng nó có vẻ tốt khi tôi thử nó.

Để có được độ rộng khoảng cách cụ thể giữa các cột, chúng ta phải thiết lập paddingbố cục của Bootstrap tiêu chuẩn.

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

Điều này sẽ hữu ích ..

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

Nếu sử dụng muốn tăng hoặc giảm thêm lề ở bên phải của hộp thì chỉ cần chỉnh sửa thuộc tính bên phải của danh sách.

đầu ra mẫu

Chỉ viền trắng xung quanh phần tử bọc

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

và con đầu + con cuối không biên giới

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

Điều này theo mặc định cung cấp một số phần đệm bên trong div bên ngoài theo cách bạn dường như cần. Ngoài ra, bạn cũng có thể sửa đổi phần đệm bằng CSS tùy chỉnh.

Cách đơn giản

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

Bootstrap 4

Tài liệu nói ( ở đây ):

Hàng là các hàm bao cho các cột. Mỗi cột có phần đệm ngang (được gọi là máng xối) để kiểm soát không gian giữa chúng. Phần đệm này sau đó được phản tác dụng trên các hàng có lề âm. Bằng cách này, tất cả nội dung trong các cột của bạn được căn chỉnh trực quan xuống phía bên trái.

Vì vậy, câu trả lời đúng là: đặt cols 'padding-left / right bằng với trừ đi rowlề trái / phải của bạn. Thật đơn giản.

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

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

Bản trình diễn: https://codepen.io/frouo/pen/OqGaWN

Bootstrap 4 - Tách các cột bằng các hàng lồng nhau.

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

Tạo một lớp và sử dụng:

lề: 1,5em .5em; chiều rộng tối đa: calc (50% - 1em)! quan trọng;

Trong đó 1em trên chiều rộng tối đa bằng với lề trái / phải được cộng lại với nhau.

Đây cũng là một cách để làm điều đó và công việc của nó. Vui lòng kiểm tra url sau 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>

Sử dụng lề trái là cách để đi:

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

hoạt động hoàn hảo

Với phiên bản bootstrap mới nhất, bạn có thể sử dụng "thẻ"