이 문제에 대한 간단한 해결책이 있다고 확신합니다. 기본적으로 두 개의 열이 있으면 열 사이에 공백을 어떻게 추가합니까?
예를 들어 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>