调整大小时Bootstrap 3按钮边框重叠

Question

我有以下HTML：

<div class="container">
    ...
    <div class="row">
        <div class="col-lg-4">
            ...
        </div>
        <div class="col-lg-8">
           ...
           <div class="btn-group" role="group">
              <button type="button" class="read-more" data-goto="more">READ MORE</button>
              <button type="button" class="read-more" data-goto="quote">FREE QUOTE</button>
           </div>
        </div>
    </div>
    ...
</div>

这是全屏显示的方式：

调整大小时的外观如下：

我的问题是小边框重叠，是否有一种方法可以在FREE QUOTE按钮上方或READ MORE按钮下方有一点边距？我不想在这些按钮上添加css margin-top或margin-bottom，因为它会影响它们在全屏幕上的显示方式。也许有一个我不知道的伎俩。

谢谢你们。

Answer 1

@media only screen and (max-width: 600px) {
    body {
        background-color: blue !important;
    }
  
  .read-more{
    margin-bottom:3px;
    margin-right: 3px;
  }
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    ...
    <div class="row">
        <div class="col-xs-4 col-lg-4">
            ...
        </div>
        <div class="col-xs-8 col-lg-8">
           ...
           <div class="btn-group" role="group">
              <button type="button" class="btn btn-default btn-md read-more" data-goto="more">READ MORE</button>
              <button type="button" class="btn btn-default btn-md read-more" data-goto="quote">FREE QUOTE</button>
           </div>
        </div>
    </div>
    ...
</div>

运行以下代码段100％工作＆amp;测试

希望它有所帮助。