[html] 부트 스트랩에서 두 열 사이의 세로 구분선

여기에 제가 한동안 사용해온 또 다른 옵션이 있습니다. 주로 시각적으로 분리 된 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를 찾습니다. 음수 여백은 어떤 열의 높이가 더 크고 구분 기호가 가장 높은 열과 같은 높이인지 더 이상 중요하지 않은 이유입니다.

또한 몇 가지 문제가 있습니다 …

1. 영리하거나 게으르고 동일한 행 요소 내에서 / 클래스 col-XX-X와 함께 클래스를 사용하려고 할 때 .hidden-XXvisible-XX
2. 열이 많고 완벽한 픽셀이 필요할 때. n-1 열을 왼쪽으로 1px 이동하기 때문에.

… 그러나 다른 한편으로는 반응이 빠르고 간단한 html에서 잘 작동하며 모든 부트 스트랩 화면 크기에 대해 이러한 클래스를 쉽게 만들 수 있습니다.