Html 如何在不影响bootstrap3中其他大小的情况下，仅向额外的小（xs）列添加填充

我使用的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（超小）时，目标标签和另一个标签之间没有填充（看起来不太好）。如何在不影响其他屏幕尺寸填充的情况下，仅为大小X（超小）添加额外填充？

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

Bootply：

CSS：

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

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

}

---

PS：我只是设置了一个蓝色背景来检查…

您可以使用媒体查询来确定特定的视口大小。例如，如果您使用的是像Sass这样的预处理器，那么您可以使用一个mixin，该mixin的目标正好是您想要的，如下面的代码

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

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