如何仅在不影响bootstrap3中其他大小的情况下将填充添加到超小（xs）列

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

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