동적 부트 스트랩 열에 아래쪽 테두리 추가

Question

부트 스트랩을 사용하여 동적으로 열을 만듭니다. 나는 다음과 같은 열이 생성 루프를 가지고 :

<div class="col-md-6 col-xs-12 inspection-category-col"> 
    <div class="media inspection-category"> 
    <div class="media-left"> 
     <a href="#"> 
     <img src="http://placehold.it/100x100"> 
     </a> 
    </div> 
    <div class="media-body inspection-category-media-body"> 
     <h3 class="media-heading inspection-category-media-heading">{{ item.title }}</h3> 
     <span class="inspection-category-media-content"> 
     {{ item.description }} 
     </span> 
    </div> 
    </div> 
</div> 

내가 각 열 사이의 경계 바닥을 추가 할을하지만, 내가 열 수를 알 수 없기 때문에 나는 다음과 같은 논리를 처리 할 필요가 :

if screen md/lg && count(cols) > 2 && not last one or two cols 
    add border-bottom 
else if screen xs && not last col 
    add border bottom 
else 
    do nothing 

이 문제를 해결하는 가장 좋은 방법은 아닙니다. 이상적으로 CSS를 통해,하지만 난 잘 모르겠다. 미리 감사드립니다.

Answer 1

논리를 감안할 때이 단계를 더 작은 단계로 나눌 수 있습니다.

먼저 화면 크기. 이를 위해 우리는 CSS 미디어 쿼리를 사용합니다. 여기에서는 600px 너비의 대형 화면과 600px의 너비가 아닌 작은 화면을 정의합니다. 당신은 당신의 필요에 맞게 이것을 바꿀 수 있습니다.

@media (min-width: 600px) { 
    /* large code here */ 
} 
@media (max-width: 600px) { 
    /* small code here */ 
} 

그런 다음 더 큰 화면을 위해 경계 논리가 필요합니다. 여기서 나는 그들 모두가 myColumn 클래스를 가지고 있다고 가정한다.

.myColumn:nth-last-of-type(n+3) { 
    border-bottom:1px solid black 
} 

: nth-last-of-type은 목록의 끝에서부터 대괄호 ​​안의 숫자를 선택합니다. N + 3 수단, 즉, 그들은 당신의 작은 화면에 대한 myColumn

사용

.myColumn:nth-last-of-type(n+2) { 
    border-bottom:1px solid black 
} 

를 클래스가있는 경우 그 단부로부터 전방으로 세번째 요소를 선택 두 이동, 목록의 제 2 소자로부터 선택한다. 선택기에 대한 당신은 엉망 수

더 here

당신은 미디어에 대한 자세한 내용을보실 수 있습니다은 @Deep을 here