Bootstrap：仅当视口为'xs'时才在两个按钮之间添加空格

Question

当视口为“sm”或更大时，我的两个提交按钮看起来很好，如下图所示：

但是：如图所示，当视口为'xs'时，按钮会被挤压在一起：

我只想在视口大小为'xs'时在两个按钮之间添加一些空格。没有检查视口大小的条件：添加两个<br>标签将修复移动视图中的间距，但会导致所有其他视口大小出现问题，因为那些其他视口中的空间太大。

如何查看视口大小？如果有更好的解决方案，我愿意接受其他建议。

按钮代码：

  <div class="form-group">
    <div class=" col-sm-offset-3 col-sm-2">
      <%= f.button('Search', class: "btn btn-default") %>
    </div>
    <div class="col-sm-3">
      <%= link_to('Find All Providers', "#", class: "btn btn-default") %>
    </div>
  </div>

Answer 1

包裹<p>标签中的按钮：

<div class="form-group">
    <div class=" col-sm-offset-3 col-sm-2">
        <p>
            <%= f.button('Search', class: "btn btn-default") %>
        </p>
    </div>
    <div class="col-sm-3">
        <p>
            <%= link_to('Find All Providers', "#", class: "btn btn-default") %>
        </p>
    </div>
</div>