이 문제에 대한 간단한 해결책이 있다고 확신합니다. 기본적으로 두 개의 열이 있으면 열 사이에 공백을 어떻게 추가합니까?

예를 들어 HTML이 다음과 같은 경우 :

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

출력은 페이지의 전체 너비를 차지하는 서로 바로 옆에있는 두 개의 열입니다. 너비가 설정되어 있다고 가정하면 1000px각 div가 500px넓을 것입니다.

100px둘 사이 에 공백을 원하면 어떻게 할 수 있습니까? 분명히 부트 스트랩을 통해 자동으로 div 크기가 450px공간을 보상하기 위해 각각됩니다.

col-md-offset-*여기에 설명 된 클래스를 사용하여 열 사이의 간격을 확보 할 수 있습니다 . 간격은 일정하므로 모든 열이 올바르게 정렬됩니다. 간격과 열 크기를 얻으려면 다음을 수행하십시오.

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

Bootstrap 4에서 다음을 사용하십시오. offset-2또는offset-md-2

나는 같은 문제에 직면했다; 다음은 저에게 효과적이었습니다. 이것이 누군가가 여기 착륙하는 데 도움이되기를 바랍니다.

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

이렇게하면 2 div 사이에 공간이 자동으로 렌더링됩니다.

나는 파티에 늦었다는 것을 알고 있지만 패딩으로 상자 간격을 둘 수 있습니다.

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

가봐

테두리 속성과 함께 배경 클립 및 상자 모델을 사용할 수 있습니다

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

열 사이의 공간과 비슷한 문제가 있습니다. 근본적인 문제는 부트 스트랩 3 및 4의 열이 여백 대신 패딩을 사용한다는 것입니다. 따라서 인접한 두 열의 배경색이 서로 닿습니다.

나는 우리의 문제에 맞는 해결책을 찾았으며 기둥을 간격을두고 나머지 그리드 시스템과 동일한 거터 너비를 유지하려는 대부분의 사람들에게 효과적 일 것입니다.

이것이 우리가 간 최종 결과였습니다

열 사이에 그림자가 생기는 간격이 문제였습니다. 우리는 열 사이에 여분의 공간을 원하지 않았습니다. 우리는 방구석이 "투명"하기를 원했기 때문에 사이트의 배경색이 두 개의 흰색 열 사이에 나타납니다.

이것은 두 열의 마크 업입니다

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

이 방법에는 "행"클래스 부트 스트랩이 사용하는 것과 같이 음의 마진을 가진 내부 div가 필요합니다. 이 div를 "raised-block"이라고하며 열의 직접적인 형제 여야합니다.

이렇게하면 열 내부에 여전히 적절한 패딩이 생깁니다. 공간을 만들어서 작동하는 것처럼 보이는 솔루션을 보았지만 불행히도 생성 한 열에는 행의 양쪽에 추가 패딩이있어 그리드 레이아웃이 설계된 행을 더 얇게 만듭니다. 원하는 모양의 이미지를 보면 두 개의 열이 위에있는 하나의 열보다 작으므로 그리드의 자연스러운 구조가 깨집니다.

이 방법의 주요 단점은 각 열의 내용을 래핑하는 추가 태그가 필요하다는 것입니다. 우리에게는 특정 열만 원하는 모양을 얻기 위해 열 사이에 공간이 필요했기 때문에 작동합니다.

이렇게하면 두 열 사이에 공백이 생기고 기본 너비를 변경하려는 경우 믹스 인이 기본 부트 스트랩 너비를 수정할 수 있습니다. 또는 인라인 CSS 스타일을 사용하여 너비를 제공 할 수 있습니다.

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

아래 코딩 된 col-xs- * div 내에서 col-xs- * 클래스를 사용하여 열 사이의 간격을 확보 할 수 있습니다. 간격은 일정하므로 모든 열이 올바르게 정렬됩니다. 간격과 열 크기를 얻으려면 다음을 수행하십시오.

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

부트 스트랩 .form-group클래스를 사용하십시오 . 귀하의 경우에 이와 같이 :

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

Bootstrap 4 문서 에 따르면 부모에게 마이너스 마진 mx-n*을 제공하고 어린이에게는 긍정적 인 패딩을 제공해야합니다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-? 안에 다른 div를 만들고 해당 div에 그림을 넣으십시오. 패딩을 쉽게 추가 할 수 있습니다.

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

부트 스트랩 4 , custom.scss 파일 다음 코드를 추가 할 수 있습니다 :

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

기본적으로 $ grid-gutter-width-base : 30px;

3 열에 대해이 작업을 수행하는 방법을 알아야했습니다. div의 모서리를 둥글게하고 싶었고 간격을 맞출 수 없었습니다. 나는 여백을 사용했다. 필자의 경우 화면의 90 %가 div로 채워지고 여백은 10 %로 채워지는 것으로 나타났습니다.

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>

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

모바일 장치의 크기를 올바르게 조정하기 위해 CSS의 너비를 30 %에서 width:92.5%;아래로 변경했습니다.@media (max-width:1023px)

부트 스트랩을 사용하고 있기 때문에 반응 형 을 만들고 싶다고 생각합니다 . 이 경우 고정 크기 (예 : 'px')를 사용해야합니다.

다른 솔루션의 해결 방법으로, "col-md-6"대신 "col-md-5"열을 만든 다음 열을 포함하는 부모 요소 "row"에 "justify-content 클래스를 추가하십시오. -between "은 부트 스트랩 문서 에서 확인할 수 있듯이 여유 공간을 중앙에 배치합니다 .

이 솔루션은 "col-md-x"를 조정하는 3 개 이상의 열에도 유효합니다.

그것이 도움이되기를 바랍니다.)

간단합니다 .. 오른쪽에 col- * 왼쪽에 단색 테두리를 추가해야하며 작동해야합니다 .. :)

다음과 같이 보입니다 : 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;
}

나는이 게시물이 약간 오래되었다는 것을 알고 있지만이 같은 문제가 발생했습니다. 내 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>

그룹 사이에 공간을 만들기 위해 site.css 파일에서 부트 스트랩의 마진을 -15px로 무시하고 음수 마진을 5로 줄였습니다.

여기 내가 한 일이 있습니다 ...

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

나는 이것이 다른 누군가를 돕기를 바랍니다.

모바일에서 하나의 열과 태블릿 초상화에서 두 개의 열이 필요합니다. 중간에 동일한 간격을 두었습니다 (열 내부에 그리드 추가 패딩 없음). 간격 유틸리티를 사용하여 다음에서 숫자를 생략 할 수 있습니다 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>

CSS를 사용하여 배경과 동일한 색상의 테두리를 추가하는 것은 어떻습니까? 나는 이것에 익숙하지 않으므로 어쩌면 좋은 이유가 없지만 시도했을 때 좋아 보였습니다.

열 사이의 특정 간격을 얻으려면 padding표준 부트 스트랩의 레이아웃에서 설정해야 합니다.

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

유용합니다 ..

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

상자 오른쪽에서 여백을 늘리거나 줄이려면 목록 항목의 오른쪽 여백 속성을 편집하십시오.

샘플 출력

랩 요소 주위에 흰색 테두리

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

첫 번째 + 마지막 자녀는 국경이 없습니다.

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

이것은 기본적으로 외부 div 내부에 필요한 것처럼 패딩을 제공합니다. 또한 사용자 정의 CSS를 사용하여 패딩을 수정할 수도 있습니다.

간단한 방법

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

부트 스트랩 4

설명서에 따르면 ( 여기 ) :

행은 열 래퍼입니다. 각 열에는 공간 사이를 제어하기위한 가로 패딩 (홈통이라고 함)이 있습니다. 그런 다음이 여백은 음의 여백이있는 행에서 대응됩니다. 이렇게하면 열의 모든 내용이 왼쪽 아래에 시각적으로 정렬됩니다.

정답은 다음과 같습니다. cols 'padding-left / right equals-row . 간단합니다.

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

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

데모 : https://codepen.io/frouo/pen/OqGaWN

부트 스트랩 4-중첩 행을 사용하여 열을 분리하십시오.

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

수업을 만들고 다음을 사용하십시오.

마진 : 1.5em .5em; 최대 너비 : calc (50 %-1em)! 중요;

최대 너비의 1em은 함께 추가 된 왼쪽 / 오른쪽 여백과 같습니다.

이것은 또한 그것을하는 한 가지 방법과 그 일입니다. 다음 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>

margin-left를 사용하는 방법입니다.

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

완벽하게 작동

최신 부트 스트랩 버전에서는 "카드"를 사용할 수 있습니다