2014-07-24 4 views
0

col-md 클래스에 미디어 쿼리 너비가 적용되지 않습니다. 아래는 제 코드입니다. 최신 버전의 Bootstrap을 사용하고 있습니다. "400 픽셀 폭"폭 제외미디어 쿼리 너비가 col-md 클래스에 적용되지 않습니까?

<div class = "col-md-8 article-container-fix"> 
    <div class = "articles" > 
     <article class="clearfix"> 
      <header> 
       line 1 
       line 2 
       line 3 
      </header> 
     </article> 
    </div> 
</div> 

CSS 코드

@media(max-width: 1199px){ 

     .article-container-fix { 

      width: 400px; 
      margin-left: 1em; 
      background: black; 
      color: white; 
     } 

    } 

는 세 가지 다른 속성은이 클래스 ".article - 컨테이너 수정"하지만 그 적용됩니다. 나는 내가 어디에서 무엇을 놓치고 있는지 모른다.

답변

0

최대 너비가 인 1199보다 작 으면 좋겠는지 720px와 같은 값으로 시도해 보시기 바랍니다. 출력에 다른 방법이 다음과 같은

HTML 것 :

<div class="col-md-8"> 
    <div class="article-container-fix"> 
     Content here! 
    </div> 
</div> 

그리고 이전에 사용 된 것과 같은 CSS를 사용합니다. 실제로 부트 스트랩을 사용하면 원하는 방식으로 일부 작업을 수행하기가 복잡해 지므로이 작업은 거의 모든 작업을 방해 할 수 있습니다. 바라기를 이것은 당신을 위해 작동 할 것입니다.

+0

감사합니다. – user3784586

0

ITS article-container-fix 클래스를 col-md-8 클래스로 작성했습니다. col-md-8은 부트 스트랩 프레임 워크 클래스입니다. 기본적으로 bootstrap.css에 지정된 기본 너비가 있습니다.

이 문제에서 해결하는 두 가지 방법이 있습니다 :

어느 쪽이든 당신은 폭과 같은 미디어 쿼리에 !important를 작성해야! 400 픽셀 중요합니다;

또는 당신은 당신의 <head> 태그에 CSS를-의 위치를 ​​다시해야

, 당신의 <head> 태그 가장 마지막으로 responsive.css을 포함한다.

+0

감사합니다. 첫 번째는 정상적으로 작동했지만 bootstrap.css에 지정된 기본 너비를 비활성화하는 방법이 있습니다. – user3784586

관련 문제