Bootstrap - 如何确保移动设备上最左边和最右边的空白答案

【问题标题】：Bootstrap - How to ensure white space on far left and far right on mobileBootstrap - 如何确保移动设备上最左边和最右边的空白
【发布时间】：2014-11-14 14:08:57
【问题描述】：

谁能告诉我如何确保在手机上查看页面时在左侧和右侧获得空白/边距？

我的 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 上查看时，引导滑块小部件跨越了设备的整个宽度。我想确保两行两侧始终有至少 20px 的边距。理想情况下，引导滑块可以缩放以适应。

【问题讨论】：

您可以尝试在小型显示器上使用container 类而不是container-fluid 的效果。
@muthan 更改容器无济于事。除移动宽度外，流体总是流向边缘。
您使用的是哪个滑块组件？
需要更好地了解您正在使用的资产，否则很难模拟解决方案。
滑块组件来自：github.com/seiyria/bootstrap-slider

标签： html css twitter-bootstrap

【解决方案1】：

如果不知道您正在使用的确切滑块组件，很难判断，但将其添加到您的 CSS 中应该可以：

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

但是，如果您只想在移动宽度上发生这种情况，请将其包装在媒体查询中：

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

【讨论】：

左侧边距有效，但右侧边距似乎无效。当我缩小我的桌面窗口时，我会在滑块小部件和显示比例的图像的对齐中得到一个跳跃。我想知道问题是否与滑块小部件（来自：github.com/seiyria/bootstrap-slider）有关？
我做了一些小调整，CSS 现在应该应用到您的滑块而不是输入。
我现在有了以下 CSS，但右手边仍然没有乐趣：#maxCostSlider { max-width:304px;宽度：304px；填充：0px；左边距：-6px； } @media (max-width: 480px) { #maxCostSlider,#sliderScale { margin-left: 20px;右边距：20px； } }
您在 CSS 中将滑块的宽度设置为 304px，不要这样做，或者在媒体查询中覆盖它。
但我需要设置滑块的宽度，否则它的宽度不足以匹配 png 比例的大小。我应该以不同的方式来做这件事吗？

【解决方案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;
      }
}

【讨论】：