Bootstrap 4按钮示例:按钮之间的空间来自何处?[duplicate]

5sxhfpxr  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(4)|浏览(129)

此问题在此处已有答案

Two inline-block elements, each 50% wide, do not fit side by side in a single row(9个答案)
四年前就关门了。
我试着检查Bootstrap 4中的“Buttons”示例。它们有一排好看的按钮,如下所示:

http://getbootstrap.com/docs/4.0/components/buttons/
但我不明白,纽扣之间的空隙是从哪里来的。

这不是边距,不是弹性框对齐,也不是透明边框。那么,它是如何工作的呢?实际上,我禁用了dev-tools中的所有样式,但那个空间并没有消失。

f8rj6qna

f8rj6qna1#

如果你检查与火狐空间来自这里,请检查截图:

您可以通过添加自己的css规则(如合并或填充)来删除空格。
谢谢

dgiusagp

dgiusagp2#

空间的到来是因为按钮默认是inline元素...这不是一个bug ...这只是浏览器中内联元素的对齐方式...
所以从你的代码中删除所有的空间是一个解决方案,我不认为我会这样做,因为如果你在编码,你的代码应该看起来很好...对...
当您使用bootstrap4时,您可以使用bootstrap d-flex

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="parent d-flex">
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
</div>

另一个解决方案是,您可以将按钮父项的font-size设置为0,然后将按钮的font-size设置为默认值

堆栈代码段

第一次

5q4ezhmt

5q4ezhmt3#

你可以使用简单的父元素flex来解决它

<div class="button">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
</div>

<style>
    .button{
        display: flex;
    }
    .button > button{
        display: inline-block;
    }
</style>
px9o7tmv

px9o7tmv4#

之所以有空格,是因为HTML元素之间有空白。如果删除空白,按钮将彼此相邻放置。
请注意,浏览器会将元素之间的空白(新行)压缩为单一空格。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

现在,如果我们删除空白:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>

相关问题