부트 스트랩 CSS-열 클래스 오류

두 클래스가 모두있는 div에 대해 두 개의 다른 클래스를 사용하여 CSS 스타일을 설정하려고하기 때문입니다. 당신은 그렇게 할 수 없습니다. 글쎄, 당신은 할 수 있지만 당신이 가지고있는 문제에 부딪 힐 것입니다.

HTML 및 CSS로 작업 할 때 다른 문서와 마찬가지로 위에서 아래로 읽는다는 점을 기억해야합니다. 따라서 브라우저가 CSS 파일을 읽을 때 주어진 순서대로 "규칙"을 읽고 그 순서대로 적용합니다.

따라서 먼저 다음과 같이 지시합니다.

.homeBGimg .col-sm-12 {padding-left: 30px;}

그런 다음이를 수행하도록 지시합니다.

.homeBGimg .col-md-12 {padding-left: 600px;}

다음과 같은 요소의 경우 :

<div class="col-sm-12 col-md-12">

기억해야 할 또 다른 사항 : Bootstrap 클래스가 해당 특정 너비에 대해 기술적으로 적용되지 않더라도 클래스는 여전히 유지 되고 여기에 연결된 모든 CSS가 계속 적용됩니다.

이 FIDDLE 을보고 무슨 일이 일어나고 있는지 확인하십시오. 여기에는 문제가있는 각 CSS 문을 사용하여 대상 항목에 테두리를 적용했습니다. 첫 번째는 파란색 테두리를 적용하고 두 번째는 주황색 테두리를 적용합니다. 뷰포트 너비에 오렌지색 만 적용되는 것을 알 수 있습니까? 주황색 테두리를 적용하는 규칙이 파란색 테두리를 적용하는 규칙 뒤에 나오고 DOM 타겟팅을 수행 한 방법에 따라 동일한 요소에 적용 되므로 가장 먼저 적용되는 규칙이 재정의되기 때문입니다.

원하는 작업을 수행하려면 CSS에서 미디어 쿼리 라고하는 것을 사용 하거나 jQuery를 사용하는 솔루션을 조사해야합니다.

미디어 쿼리로이를 수행하는 방법과 더 나은 타겟팅에 대한 예는 이 다른 FIDDLE 을 확인하세요 .

HTML :

<section class="homeBGimg">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 foo">
                 <h1>Are you prepared for retirement?</h1> 
                 <h2>Find out at a complimentary retirement workshop near you.</h2>

                <p> <a href="what-you-should-know.html#videos" class="btn btn-outline-inverse btn-lg" data-toggle="tooltip" data-placement="top" title="Learn More">Learn More</a>

                </p>
            </div>
        </div>
    </div>
</section>

CSS :

.homeBGimg {
    padding: 100px 0 100px;
    color: #fff;
    position: relative;
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg .even {
    background-image: url(http://placehold.it/1920x1200);
}
.homeBGimg h1 {
    color: #000;
}
@media screen and (max-width: 992px) {
    .homeBGimg .row div {
        padding-left: 600px;
        border: 1px solid orange;
    }
}
@media screen and (max-width: 768px) {
    .homeBGimg .row div {
        padding-left: 30px;
        border: 1px solid blue;
    }
}

이것이 당신이 올바른 길로 시작되기를 바랍니다.