如何在同一个 div 中的两个按钮之间留出空间？

Posted 2023-03-05

【中文标题】如何在同一个 div 中的两个按钮之间留出空间？

【英文标题】：How can I make space between two buttons in same div?

【发布时间】：2012-06-28 07:41:37

【问题描述】：

水平间隔 Bootstrap 按钮的最佳方式是什么？

按钮正在触摸的那一刻：

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

jsfiddle 显示问题：http://jsfiddle.net/hhimanshu/sYLRq/4/

【问题讨论】：

我遇到了同样的问题，并在其中一个按钮 mr-1 上添加了边距。

【参考方案1】：

这是基于documentation 的另一种方法。

 <div class="d-grid gap-2 d-md-flex" >
    <button type="button" class="btn btn-outline-primary btn-sm">button1</button>
    <button type="button" class="btn btn-outline-primary btn-sm">button2</button>
 </div>

【讨论】：

唯一对我有用的解决方案，干杯。

【参考方案2】：

Dragan B. 解决方案是正确的。在我的情况下，我需要在堆叠时垂直间隔按钮，所以我向它们添加了 mb-2 属性。

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

【参考方案3】：

我最终做了类似于 mark dibe 所做的事情，但我需要以稍微不同的方式计算间距。

bootstrap 中的 col-x 类可以成为绝对的救星。我最终做了类似的事情：

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

这使我能够以良好间隔的方式对齐标题和输入开关。可以将相同的想法应用于按钮并允许您停止触摸按钮。

（旁注：我希望这是对上述链接的评论，但我的声誉不够高）

【参考方案4】：

将它们放在btn-toolbar 或其他容器中，而不是btn-group。 btn-group 将它们连接在一起。更多关于 Bootstrap 的信息documentation。

编辑：最初的问题是针对 Bootstrap 2.x，但同样适用于 Bootstrap 3 和 Bootstrap 4。

在Bootstrap 4 中，您需要使用实用程序类（例如 mx-2）为您的组添加适当的边距。

【讨论】：

几年前我一直在寻找解决这个问题的方法，为什么我以前没有找到你，你是我的英雄

多么直接的答案！我今天的英雄:)

btn-toolbar 可能会将一些按钮换行。如何避免这种情况？

它计划中断响应。如果你真的想防止它崩溃，那么在 Bootstrap 4 中将 flex-wrap: nowrap 设置为 btn-toolbar 或尝试将 overflow 和 white-space 组合用于旧版 Bootstrap。

@Svend，看看下面的“按钮组”部分 - getbootstrap.com/docs/4.1/components/button-group/…

【参考方案5】：

Dragan B 的建议是 Bootstrap 4 的正确方法。我在下面举了一个例子。例如mr-3 是 margin-right:1rem!important

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps：在我的情况下，我希望我的按钮显示在屏幕的右侧，因此是向右拉的。

【讨论】：

只需将按钮包裹在btn-toolbar 中即可解决空间问题！

【参考方案6】：

你应该使用 bootstrap v.4

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

【讨论】：

这是 Bootstrap 4 IMO 的最佳解决方案。在较小的屏幕上，您可以使用“px-0 px-sm-2”相应地去除填充。很好的答案。

【参考方案7】：

实现此目的的另一种方法是在按钮中添加一个类 .btn-space

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

并定义这个类如下

.btn-space 
    margin-right: 15px;

【参考方案8】：

我使用了 Bootstrap 4 按钮插件 (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin) 并将 rounded 类添加到标签中，将 mx-1 类添加到中间按钮，以实现单独单选按钮的所需外观。使用类 btn-toolbar 使单选按钮圆圈出现在我面前，这不是我想要的。希望这可以帮助某人。

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

【参考方案9】：

如果使用Bootstrap，你可以改变如下样式：如果你只想在一页中，那么在head标签之间添加.btn-group btnmargin-right:1rem;

如果是为所有网站添加到css文件

【参考方案10】：

您可以使用spacing for Bootstrap，而无需任何额外的 CSS。只需将类添加到您的按钮。这是针对第 4 版的。

【讨论】：

我希望按钮连续显示并允许它们在小屏幕上堆叠（由于环绕）。为了实现水平和垂直的间距，使用引导程序提供的东西，我做了：className='mb-2 mr-2'，遵循@dragan-b 的建议

【参考方案11】：

按照 Miroslav Popovic 兄弟的说法，只需将按钮放在一个类 ( class="btn-toolbar" ) 中即可。效果很棒。

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

【参考方案12】：

在大多数情况下，最简单的方法是边距。

你可以在哪里做：

button
  margin: 13px 12px 12px 10px;

或

button
  margin: 13px;

【讨论】：

当您可以将引导按钮放置在 btn-toolbar 类中时，不应使用自定义边距。

【参考方案13】：

我实际上遇到了同样的要求。我只是像这样使用 CSS 覆盖

.navbar .btn-toolbar  margin-top: 0; margin-bottom: 0