화면 크기에 따라 부트 스트랩 격자 요소 패딩 변경

Question

화면 크기에 따라 어떻게 다른 패딩을 가질 수 있습니까? 예를 들어 나는 COL-SM을-7 원하는 미디어 본체의 미디어 본체의 COL-MD-8이 가지고있는 동안 padding: 26px 16px 30px 10px; 을 가지고 :

<div class="media-body col-sm-7 col-md-8 "> 
      <h4 class="media-heading"><%= link_to 'Contacts', root_path, class: 'media-heading' %></h4> 
      <p class="hidden-sm">Where to find the <strong>Creatives</strong> contact module and more.</p> 
</div> 

: padding: 32px 30px 10px 35px;

를이 내 코드 내 일부입니다 이건 내 application.css.scss 파일입니다

.media-body .col-md-8 { 
    padding: 32px 30px 10px 35px; 
} 

.media-body .col-sm-7 { 
    padding: 26px 16px 30px 10px; 
} 

이 CSS를 작동하지 않았다, 그것은 영향을 미치지 않고 CSS 파일에서 COL 클래스를 호출하는 방법이 다른 유사한 COL 클래스는 그에게 나머지를 int로 문서화하고 원하는 것을 얻는다. 심?

Answer 1

css에서 .media-body .col-md-8 사이의 공백을 제거하십시오.

은 그래서 ...로 읽어

.media-body.col-md-8 { 
    padding: 32px 30px 10px 35px; 
} 

.media-body.col-sm-7 { 
    padding: 26px 16px 30px 10px; 
}