부트스트랩 열 사이에 줄을 긋지 않고 여백을 추가하는 방법

부트스트랩 열 사이에 줄을 긋지 않고 여백을 추가하는 방법

이 질문에는 이미 다음과 같은 답변이 있습니다.

열 사이에 간격을 추가하는 방법은? (36개 답변)

닫힘4년 전에.

현재 제 레이아웃은 이렇게 보입니다.

중앙 열에서 각 열 사이에 작은 여백을 추가합니다.ServerDiv. 그런데 CSS에 여백을 더하면 이렇게 라인랩이 되고 이렇게 됩니다.

<div class="row info-panel">
    <div class="col-md-4 server-action-menu" id="server_1">
        <div>
            Server 1
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_2">
        <div>
            Server 2
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_3">
        <div>
            Server 3
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_4">
        <div>
            Server 4
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_5">
        <div>
            Server 5
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_6">
        <div>
            Server 6
        </div>
    </div>
    <div class="col-md-4 server-action-menu" id="server_7">
        <div>
            Server 7
        </div>
    </div>
</div>

그리고 CSS는

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
}

.info-panel {
    padding: 4px;
}

이렇게 해서 마진을 더하려고 했습니다.

.info-panel  > div {
    margin: 4px;    
}

DIV가 오른쪽에 공간이 많이 남지 않도록 하려면 어떻게 해야 합니까?

여백보다는 안쪽 용기에 패딩을 덧대어 작업해야 합니다.이거 먹어봐요.

HTML

<div class="row info-panel">
    <div class="col-md-4" id="server_1">
       <div class="server-action-menu">
           Server 1
       </div>
   </div>
</div>

CSS

.server-action-menu {
    background-color: transparent;
    background-image: linear-gradient(to bottom, rgba(30, 87, 153, 0.2) 0%, rgba(125, 185, 232, 0) 100%);
    background-repeat: repeat;
    border-radius:10px;
    padding: 5px;
}

저도 같은 문제에 직면해 있었는데, 다음과 같은 것들이 제게 잘 들어맞았습니다.

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

이렇게 하면 자동으로 두 디브 사이에 일부 공간이 렌더링됩니다.

열에 테두리를 추가할 필요가 없는 경우 열에 투명 테두리를 추가할 수도 있습니다.

[class*="col-"] {
    background-clip: padding-box;
    border: 10px solid transparent;
}

개수 변경@grid-columns. 그럼 사용.-offset. 열 수를 변경하면 열 사이의 공간을 조절할 수 있습니다.예.

variables.less(approx 행 294).

@grid-columns:              20;

someName.html

<div class="row">
  <div class="col-md-4 col-md-offset-1">First column</div>
  <div class="col-md-13 col-md-offset-1">Second column</div>
</div>

이것을 하는 간단한 방법은 디브 안에서 디브를 하는 것입니다.

<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 1
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 2
   </div>
 </div>
<div class="col-sm-4" style="padding: 5px;border:2px solid red;">
   <div class="server-action-menu" id="server_1">Server 3
   </div>
 </div>

언급URL : https://stackoverflow.com/questions/19010845/how-do-i-add-a-margin-between-bootstrap-columns-without-wrapping