Bootstrap 具有引导类的按钮之间的间距

kadbb459 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(4)|浏览(128)

我的站点上有三个按钮有问题。我希望在这些按钮之间有一些空间。不使用内联样式可以做到这一点吗？也许bootstrap有一些用于此的类？
我知道我可以简单地做到这一点：

style='margin-right:5px;'

或使用此属性编写自定义类。
我只是想知道bootstrap是否有这方面的类？
Here是示例。
问题出在这三个按钮上：

<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>

twitter-bootstrap

来源：https://stackoverflow.com/questions/43065802/space-between-buttons-with-bootstrap-class

4条答案

按热度按时间

jmo0nnb31#

试着把它们放在btn-toolbar或其他容器中。

<div class="btn-toolbar">
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
  <button type="button" class="btn btn-primary col-sm-1">1/2</button>
 </div>

赞(0）回复(0）举报 2022-12-16

egmofgnx2#

是的，你得把它们包起来

<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>

EDITED CODEPEN

赞(0）回复(0）举报 2022-12-16

hujrc8aj3#

<div class="btn-toolbar">
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
      <button type="button" class="btn btn-primary col-sm-1">1/2</button>
    </div>

赞(0）回复(0）举报 2022-12-16

vkc1a9a24#

d-flex justify-content-between

<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
    <button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
    <a href="" class="btn btn-secondary">Reset</a>
</div>

会像魔法一样奏效。

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 具有引导类的按钮之间的间距

4条答案

相关问题

热门标签

最新问答