부트 스트랩 : 열 사이에 여백 / 패딩 공간 추가

부트 스트랩 : 열 사이에 여백 / 패딩 공간 추가

---

내 Bootstrap 그리드 레이아웃의 열 사이에 추가 여백 / 패딩 공간을 두려고합니다. 나는 해봤 이 하지만 난 결과 좋아하지 않는다. 내 코드는 다음과 같습니다.

    <div class="row">
        <div class="text-center col-md-6">
            Widget 1
        </div>
        <div class="text-center col-md-6">
            Widget 2
        </div>
    </div>

추가 margin: 10px하고 싶습니다 padding:10px. 어떤 사람들은 수업을 col-md-5with pull-left및 으로 변경하도록 제안 pull-right하지만 둘 사이의 간격이 너무 큽니다.

---

2018 업데이트

이제 부트 스트랩 4 에는 열 사이의 공간 (거터)을 더 쉽게 추가 (또는 빼기) 할 수있는 간격 유틸리티 가 있습니다. 추가 CSS는 필요하지 않습니다 .

<div class="row">
    <div class="text-center col-md-6">
        <div class="mr-2">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="ml-2">Widget 2</div>
    </div>
</div>

(margin-left : 0), (margin-right : 0), (.25rem left & right margins) 등과 같은 여백 유틸리티를 사용하여 열 내용의 여백을 조정할 수 있습니다 .ml-0mr-0mx-1

또는 pl-0 (padding-left : 0), pr-0 (padding-right : 0), px-2 (.50rem left & .50rem)와 같은 패딩 유틸리티를사용하여 열의 패딩 (col- *)을 조정할 수 있습니다. 오른쪽 패딩) 등 ...

부트 스트랩 4 열 간격 데모

메모

• 왼쪽 / 오른쪽 여백을 변경하면 col-*격자가 끊어집니다.
• col-*작품 내용의 좌우 여백을 변경 합니다.
• 또한 왼쪽 / 오른쪽 패딩을 변경 col-*합니다.

---

col-md-6필요한 추가 패딩이 있는 div를 추가하기 만하면 됩니다. 는 col-md-6열 무결성을 유지하는 '백본',하지만 당신은 그 안에 추가 패딩을 추가 할 수 있습니다.

<div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div>

CSS

.classWithPad { margin:10px; padding:10px; }

---

나는 같은 문제에 직면했다. 다음은 나를 위해 잘 작동했습니다. 이것이 누군가 여기에 착륙하는 데 도움이되기를 바랍니다.

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
 <div class="col-md-6">
   <div class="col-md-12">
     Set room heater temperature
   </div>
 </div>
</div>

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

---

'justify-content-around'클래스를 추가하기 만하면됩니다. 2div 사이에 간격을 자동으로 추가합니다.

문서 : https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment

견본:

<div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
</div>

---

패딩 및 여백 속기 Bootstrap 4 클래스를 다음과 같이 사용할 수 있습니다.

초소형 장치, 즉 xs 용

{property}{sides}-{size}

기타 장치 / 뷰포트 (소형, 중형, 대형 및 초대형)

{property}{sides}-{breakpoint}-{size}

어디:

property = m for margin and p for padding

다음은 측면의 속기 의미입니다.

l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides

중단 점 = sm, md, lg 및 xl.

위의 모든 것을 결합하면 왼쪽 패딩 완료 코드는 다음과 같습니다.

초소형 기기의 왼쪽 패딩 용

pl-2

또는 중간에서 초대형

pl-md-2

---

더 큰 디스플레이를 위해 중간에 추가 열을 유지하고 더 작은 디스플레이에서 열이 축소되면 기본값으로 재설정됩니다. 이 같은:

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>

---

flexbox로 매우 쉽습니다. 열을 다음과 같이 변경하여 약간의 공간을 확보하십시오.col-md-5

<div class="row widgets">
    <div class="text-center col-md-5">
        Widget 1
    </div>
    <div class="text-center col-md-5">
        Widget 2
    </div>
</div>

CSS

.widgets {
    display: flex;
    justify-content: space-around;
}

---

이 시도:

 <div class="row">
    <div class="text-center col-md-6">
       <div class="col-md-12"> 
          Widget 1
       </div>
    </div>
    <div class="text-center col-md-6">
        <div class="col-md-12"> 
          Widget 2
        </div>
    </div>
</div>

---

다른 쪽에서 열 사이의 이중 패딩을 제거하려면 행 안에 "nogap"클래스를 추가하십시오.

<div class="row nogap">
    <div class="text-center col-md-6">Widget 1</div>
    <div class="text-center col-md-6">Widget 2</div>
</div>

추가 CSS 클래스를 만듭니다.

.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }

여기에서 확인하십시오 : https://codepen.io/michal-lukasik/pen/xXvoYJ

---

동적 열 수 사이의 공간을 제어하려는 경우 다음을 시도하십시오.

<div class="row no-gutters">
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <div class="col">
        <div class="inner">
            <!-- content here -->
        </div>
    </div>
    <!-- etc. -->
</div>

CSS :

.col:not(:last-child) .inner {
  margin: 2px; // Or whatever you want your spacing to be
}

---

나는 똑같은 문제가 있었고 부트 스트랩 col 안에 div를 중첩하고 패딩을 추가하여 해결했습니다. 다음과 같은 것 :

<div class="container">
 <div class="row">
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
  <div class="col-md-4">
   <div class="custom-box">Your content with padding</div>
  </div>
 </div>
</div>

---

A solution for someone like me when cells got background color

HTML

<div class="row">
        <div class="col-6 cssBox">
            a<br />ba<br />ba<br />b
        </div>
        <div class="col-6 cssBox">
            a<br />b
        </div>
</div>

CSS

.cssBox {
  background-color: red;
  margin: 0 10px;
  flex-basis: calc(50% - 20px);
}

---

Try this:

<div class="row">
      <div class="col-md-5">
         Set room heater temperature
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-5">
         Set room heater temperature
     </div>
</div>

---

For the more curious, I have also found that adding

border: 5px solid white

or any other variant of your liking, to make it blend in, works superbly.

ReferenceURL : https://stackoverflow.com/questions/22989515/bootstrap-add-margin-padding-space-between-columns