如何使用Bootstrap的btn-block设置边距？

Question

我想在使用Bootstrap的btn-block时为我的按钮添加边距。不幸的是，它并没有做到我想要的，因为按钮并没有缩小。按钮超出了其div。

在这段文字下面，您可以看到我的意思。两个按钮都包含Bootstrap的'btn-block'元素。上面的按钮有一个边距。

<div>
    <button type="button" class="btn btn-block btn-default" style="margin:0px 10px 0px 10px;">No</button>
    <button type="button" class="btn btn-block black-button">Yes</button>
</div>

有人知道如何为按钮应用边距，使得按钮保持在上方的 div 中吗？

- Klyner

Answer 1

你应该对容器 div 添加内边距，而不是按钮。

<div style="width:90%; padding:0 10px;">
    <button type="button" class="btn btn-block btn-default" >No</button>
    <button type="button" class="btn btn-block black-button">Yes</button>
</div>

您可以查看示例：https://codepen.io/tsdln/pen/OgLYrE。

- tsdln

---

太好了。这是一个简单且有效的技巧。Codepen更新已经生效，但是您在上面的代码示例中写错了；宽度应该是100%，而不是90%。谢谢！ - Klyner

一个快速而好的解决方案。虽然我不会在HTML中嵌入样式，但毕竟现在是2017年 :) - Nick M

Answer 2

将按钮用 div 标签包裹起来，然后将样式放在其中。

<div>
    <div style="margin:0px 10px 0px 10px;">
        <button type="button" class="btn btn-block btn-default">No</button>
    </div>
    <button type="button" class="btn btn-block black-button">Yes</button>
</div>

那样，按钮只会扩展到填充您的margin'd div，而不是整个页面。

- Ollie

Answer 3

Bootstrap 是一个很棒的框架，但他们不能覆盖每一个可能的使用情况。我不知道别人怎么做，但我有一个单独的 CSS 文件，在 BS 主题之后加载（我称其为 overrides.css），并在其中保留一些内容：

.no-margin, .no-margins { margin:0px !important; }
.no-padding, .no-paddings { padding:0px !important; }
@media only screen and (max-width:651px) {
   .mobile-no-margin, .mobile-no-margins { margin:0px !important; }
   .mobile-no-padding, .mobile-no-paddings { padding:0px !important; }
}

然后我只需在需要的地方应用这些类。

如果您担心会有额外的请求并且没有资源管道，您可以在引导样式表的末尾添加类似于这样的内容。

- Nick M