Question

我目前在水平线上有一些按钮，但我想添加边距以将按钮推离彼此。

我正在一个较小的窗口中编辑我的代码，并且按钮使用CSS边距精确间隔，但是当我最大化窗口时，我注意到按钮之间的边距要么将一些按钮推到一个新行，要么将它们拉回来。 / p>

我无法找到一种方法来以相应的方式在同一行设置这些按钮的边距，因此它们不会推送到新线或拉回。

有什么想法吗？

HTML

<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
        <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a>
        <a href="/deselect-all" class="btn btn-default">Deselect All</a>
        <a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>

CSS

.btn-selectspacer {
    margin-left: 40em;
}

.btn-infospacer {
    margin-left: 2.25em;
}

.btn-submitpadding {
    padding-top: 7px;
    padding-bottom: 7px;
}

图片 Button Spaced with margins horizontally

谢谢你，亚历

Answer 1

您可以使用Bootstrap附带的网格系统来完成此操作。例如，提交占用9个字符串，选择/全部占用2然后更多信息占用1.然后只需将提交按钮对齐在列的左侧。

Answer 2

这是您所需要的非常简单的解决方案。我尝试了自己，结果就像你想要的附加图像。就像您在非常大的设备中测试它一样，我建议您为超大型设备下载以下bootstrap css。 BOOTSTRAP CSS FOR EXTRA LARGE DEVICES 将此css放在您的bootstrap css文件下面，然后您可以使用另一个列类，如“col-xl-numbers of columns”。对于您的具体情况，我将“col-xs-12”添加到按钮div。注意：Upcomming Bootstrap 4内置了超大型设备。你应该只是

   .btns-right {
     float:right; 
     margin-right:5%; 
   }

  .btn-submitpadding {
    padding-top: 7px;
    padding-bottom: 7px;
   }

你的html应该是

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>

    <div class="btns-right">
        <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a>
        <a href="/deselect-all" class="btn btn-default btn-selectspacer2">Deselect All</a>
        <a class="btn btn-info btn-infospacer" role="button"       data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>
      </div>
  </div>

如何以响应方式为同一行上的按钮设置边距？

2 个答案: