css 引导按钮上没有边距底部？

p3rjfoxz 于 2023-03-09 发布在其他

关注(0)|答案(5)|浏览(184)

我在引导模板中使用按钮元素。
我想知道这是否是bootstrap中的正常行为：
当没有足够的空间在一行上显示所有按钮时，或者当窗口调整大小时，一些按钮显示在第二行上，这样做是可以的，但没有边距底部。
我可以补充一句：

.btn {
    margin-bottom: 5px; 
}

但我觉得奇怪的是，它不是由bootstrap处理的。
也许我做错了什么？

来源：http://jsfiddle.net/Vinyl/zx9oefya/

<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>
<button type="button" class="btn btn-primary btn_plus_infos" data-toggle="collapse" data-target="#plus_infos">Plus d'infos</button>

css

来源：https://stackoverflow.com/questions/26427963/no-margin-bottom-on-bootstrap-button

5条答案

按热度按时间

izj3ouym1#

在Bootstrap的buttons.less和button-groups.less中，没有任何关于上边距或下边距的内容。在默认情况下，如果将边距与其他元素（例如表单）组合，可能会发生冲突。
我认为最好的解决方案可能是将所有按钮添加到btn-toolbar中，并对该组合进行样式设置：

.btn-toolbar .btn {
    margin-bottom: 5px; 
}

赞(0）回复(0）举报 2023-03-09

x7rlezfr2#

只需添加间距类。m用于边距，p用于填充。

<button class="btn btn-success mr-2" type="submit">Add</button>
 <button class="btn btn-danger mr-2" type="button">Delete</button>

所以，这里mr是右边距。类似地，您可以为其他情况添加do。

赞(0）回复(0）举报 2023-03-09

cig3rfwq3#

mb-5 = margin bottom ..只需添加：）已排序：）

赞(0）回复(0）举报 2023-03-09

zkure5ic4#

我认为这是正常的行为（不是100%肯定），因为它是“清洁”，以增加自己的利润时，我们想要它，而不是必须删除默认的利润时，我们不想要它，从我的意见...
http://getbootstrap.com/components/#btn-groups
在bootstrap的按钮示例中没有margin，只有在div父类btn-group中，但是它来自不同的样式表（docs.min.css），所以我认为开发人员可以通过这种方式添加他们自己的自定义margin。
请参见此处：