如何使用bootstraps btn-block设置保证金？

Question

我想在使用bootstrap的btn-block时为我的按钮添加一个边距。不幸的是，它不能做我想做的事，因为按钮不会缩小。按钮离开了它的div。

在此文本下，您可以看到我的意思。这两个按钮都包含bootstraps＆＃b; btn-block＆＃39;元件。上面的按钮有一个边距。

<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中的方式对按钮应用边距吗？

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

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，而不是整页。

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

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

如果你担心一个额外的命中并且没有资产管道，你可以在引导样式表的末尾加上这样的东西。