Question

我正在使用像这样的bootsrap 3：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label class="control-label" for="destination">Destination</label>
        <input type="text" name="destination" class="form-control" id="destination">
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
        <label for="anotherInput">Another Label</label>
        <input type="text" name="anotherInput" class="form-control">
    </div>
</div>

无论屏幕大小如何，所有列都已正确设置并且行为正常。问题是当屏幕是xs（超小）时，目标标签和另一个标签之间没有填充（看起来不太好）。如何在不影响其他屏幕尺寸的填充的情况下为xs（超小）添加额外的填充？

Answer 1

您可以使用css和媒体查询：

Bootply ：http://www.bootply.com/124772

CSS ：

@media screen and (max-width: 768px){

  *[class*='col-xs']{
    background:blue;
    padding:50px;
  }

}

PS ：我只是设置了蓝色背景以便检查...

Answer 2

您可以使用媒体查询来定位特定的视口大小。例如，如果你使用像Sass这样的预处理器，你可以使用一个mixin，它可以像你想要的那样完全瞄准你想要的代码。

div you are targeting {
  @include respondto(phone) {
  add extra padding or whatever you want
  }
}

您当然会相应地更改此代码。

如何仅在超小（xs）列中添加填充而不影响bootstrap3中的其他大小

2 个答案: