부트 스트랩 - 모바일의 맨 왼쪽과 맨 오른쪽에 공백을 두는 방법

Question

휴대 전화에서 페이지를 볼 때 왼쪽과 오른쪽에 공백/여백을 확보하는 방법을 알려줄 사람이 있습니까?

내 CSS는 다음과 같습니다

#maxCostSlider { 
    max-width:304px; 
    width:304px; 
    padding:0px; 
    margin-left:-6px; 
} 
@media (max-width: 480px) { 
    #maxCostSlider,#sliderScale { 
     margin-left: 20px; 
     margin-right: 20px; 
    } 
} 

HTML은 다음과 같습니다

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-offset-4 col-md-4"> 
     <img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive" /> 
    </div> 
    </div> 
    <div class="row text-center"> 
    <div class="col-md-offset-4 col-md-4"> 
     <input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" /> 
    </div> 
    </div> 
</div> 

이 모든 데스크톱 및 아이 패드하지만 아이폰에서 볼 때 부트 스트랩 슬라이더 위젯이 전체 폭에 걸쳐에 좋아 보인다 장치의 나는 항상 최소한 두 줄의 어느 쪽이든 적어도 20px의 여백이 있도록하고 싶다. 이상적으로 부트 스트랩 슬라이더는 크기에 맞게 조정됩니다.

Answer 1

없이 말할 사용하고있는 정확한 슬라이더 구성 요소를 알고 있지만, 여러분의 CSS이 추가가 작동해야하는 하드 : 그러나

#maxCostSlider { 
    margin-left: 20px; 
    margin-right: 20px; 
} 

을 당신은 단지 그 이동 폭으로 일하려는 경우, 미디어에 포장 검색어 :

@media (max-width: 480px) { 
    #maxCostSlider { 
     margin-left: 20px; 
     margin-right: 20px; 
    } 
} 

Answer 2

작은 기기 (sm) 및 소형 기기 (xs)의 경우 별도로 호출 할 수 있습니다.

<div class="col-sm-offset-1 col-xs-offset-1 col-md-offset-4 col-md-4"></div> 

그리고 다른 방법으로 CSS로 할 수 있습니다.

@media (min-width: 240px) and (max-width: 480px) { 
    #max-cost { 
     padding-left: 20px; 
     padding-right: 20px; 
     } 
}