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>

这在桌面和iPad上看起来都不错，但在iPhone上查看时，bootstrap-slider小部件会跨越设备的整个宽度。我想确保在两行的任一侧始终存在至少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;
      }
}

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

2 个答案: