Bootstrap-如何确保移动设备最左侧和最右侧的空白

Question

Can anyone tell me how to ensure I get white space/margin on the left hand side and right hand side when the page is viewed on a mobile phone?

My CSS is:

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

HTML is:

<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>

This all looks good on a desktop and an iPad but when viewed on an iPhone the bootstrap-slider widget spans the entire width of the device. I would like to ensure there is always a margin of at least 20px either side of the two rows. Ideally the bootstrap-slider would scale to fit.

Answer 1

Hard to tell without know the exact slider component you are using, but adding this to your CSS should work:

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

However if you only want that to happen at mobile width, wrap it in a media query:

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

Answer 2

For small device(sm) and extra small device (xs) you can call them separately.

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

And another way you can do this by css.

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