如何在同一个 div 中的两个按钮之间创建空格？

小开

最佳答案

把它们放在 btn-toolbar或其他容器里，而不是 btn-group。 btn-group把它们连接在一起。更多关于引导文件的信息。

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

在鞋带4中，您需要使用实用工具类(如 mx-2)为组添加适当的边距。

小开

我实际上也遇到了同样的需求

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

小开

在大多数情况下，最简单的方法是保证金。

你可以在哪里做:

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

或者

button{
margin: 13px;
}

小开

只要把按钮放在一个类(class = “ btn-toolbar”)中，就像 Miroslav Popovic 兄弟说的那样。

<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>

小开

您可以使用引导带的间距，不需要任何附加的 CSS。只需将类添加到您的按钮中。这是第四版。

小开

如果使用 Bootstrap，您可以更改样式，如: 如果您只想在一个页面，然后在头标签之间添加 . btn-group btn {右边距: 1rem; }

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

小开

你应该使用引导器 V4

<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按钮插件(https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin) 将类圆的添加到标签中，将类 Mx-1添加到中间按钮中，以实现单独的单选按钮所需的外观和感觉。使用类 工具栏使单选按钮圆圈出现对我来说，这不是我想要的。希望这对谁有帮助。

        <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>

小开

实现这一点的另一种方法是在按钮中添加一个 class. 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;
}

小开

Dragan B 的建议对于 Bootstrap 4来说是正确的。我在下面举了一个例子。例如，Mr-3是右边距: 1 rem！很重要

<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>

在我的例子中，我希望我的按钮显示在屏幕的右边，因此拉右。

小开

我最终做了一些类似于 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>

这使我能够以一种很好的间隔方式对齐标题和输入开关。同样的想法也可以应用到按钮上，让你停止按钮的触摸。

(附注: 我希望这是一个评论上述链接，但我的声誉不够高)

小开

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>

小开

这是另一种基于文件的方法。

 <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>

小开

你也可以只是把两个按钮在一个柔性盒子，并设置与 CSS 的差距

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" rel="stylesheet">
<script crossorigin="anonymous"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="d-flex flex-row" style="gap:5px;">
<button type="button" class="btn btn-primary">Add to list</button>
<button type="button" class="btn btn-secondary">more</button>
</div>