Bootstrap CSS 导航栏按钮之间的间距问题

Question

如何在导航栏中的按钮之间加入空格？通常我会使用 来进行操作，但现在似乎不起作用了。下面是一个JSfiddle演示它的样子：http://jsfiddle.net/W6hEa/

- dynamitem

---

http://jsfiddle.net/W6hEa/1/ 对我来说是有效的，但可能不是你想要的。 - tobspr

个人认为导航栏链接比在那里放置按钮更美观，如果您愿意，仍然可以使用图标。否则，我同意使用margin-left或right。http://jsfiddle.net/W6hEa/3/ - Steve Valliere

Answer 1

你可以尝试使用margin-left

这是代码

.btn{
margin-left:10px;
}

这是一个例子： FIDDLE

- RbG

Answer 2

复制并粘贴以下代码到你的style.css文件中，并将其分配为类属性：

.btn-margin-left {
    margin-left: 2px;
}
.btn-margin-right {
    margin-right: 2px;
}

用法

<a href="URL" class="btn btn-default btn-sm btn-margin-left">Link</a>

<button type="button" class="btn btn-default btn-sm btn-margin-left">Button</button>

- Jens A. Koch

---

更喜欢这种方法，因为它不会操纵默认的BS样式。 - user692942

Answer 3

在Bootstrap 4.0x中，您可以在类内定义间距。

https://getbootstrap.com/docs/4.0/utilities/spacing/

例如，

所以举个例子

。

<button type="button" class="btn btn-default ml-2>Button</button>

- Crabigator360