여기에 제가 한동안 사용해온 또 다른 옵션이 있습니다. 주로 시각적으로 분리 된 2 개의 열을 필요로하기 때문에 나를 위해 잘 작동합니다. 또한 반응이 좋습니다. 즉, 중간 크기와 큰 화면 크기로 나란히 열이 있으면 클래스를 사용합니다.col-md-border 더 작은 화면 크기에서 구분 기호를 숨기는 .
css :
@media (min-width: 992px) {
.col-md-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-md-border + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
scss에서는 다음과 같이 필요한 모든 클래스를 생성 할 수 있습니다.
scss :
@media(min-width: $screen-md-min) {
.col-md-border {
&:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
& + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
}
HTML :
<div class="row">
<div class="col-md-6 col-md-border"></div>
<div class="col-md-6 col-md-border"></div>
</div>
작동 원리 :
열은 다른 열이없는 요소 안에 있어야합니다. 그렇지 않으면 선택기가 예상대로 작동하지 않을 수 있습니다.
.col-md-border:not(:last-child).row 닫기 이전 의 마지막 요소를 제외한 모든 요소 와 일치하고 오른쪽 테두리를 추가합니다.
.col-md-border + .col-md-border이 두 개가 서로 옆에 있고 왼쪽 테두리와 -1px 음의 여백을 추가하는 경우 동일한 클래스의 두 번째 div를 찾습니다. 음수 여백은 어떤 열의 높이가 더 크고 구분 기호가 가장 높은 열과 같은 높이인지 더 이상 중요하지 않은 이유입니다.
또한 몇 가지 문제가 있습니다 ...
- 영리하거나 게으르고 동일한 행 요소 내에서 / 클래스
col-XX-X와 함께 클래스를 사용하려고 할 때 .hidden-XXvisible-XX
- 열이 많고 완벽한 픽셀이 필요할 때. n-1 열을 왼쪽으로 1px 이동하기 때문에.
... 그러나 다른 한편으로는 반응이 빠르고 간단한 html에서 잘 작동하며 모든 부트 스트랩 화면 크기에 대해 이러한 클래스를 쉽게 만들 수 있습니다.