如何像示例中那样在引导按钮之间增加间距？

Question

官方网站上有一个引导按钮的综合示例，但我不知道为什么按钮之间有间距以及如何做？ 任何浏览器调试工具都不会显示任何内容：有一些顶部和底部的边距，但没有水平间距！谁能解释？

https://getbootstrap.com/docs/4.3/components/buttons/

Answer 1

只需在样式中添加诸如：

data = '''<p style="margin-top:6pt;margin-bottom:0pt;text-indent:4.54%;font-family:Times New Roman;font-size:10pt;font-weight:normal;font-style:normal;text-transform:none;font-variant: normal;">
   The following graph sets forth the cumulative total return to CECO’s shareholders during the five years ended December&nbsp;31, 2018, as well as the following indices: Russell 2000 Index, Standard and Poor’s (“S&amp;P”) 600 Small Cap Industrial Machinery Index, and S&amp;P 500 Index. Assumes $100 was invested on December&nbsp;31, 2013, including the reinvestment of dividends, in each category.
</p>
<p style="margin-top:6pt;margin-bottom:0pt;text-indent:4.54%;font-family:Times New Roman;font-size:10pt;font-weight:normal;font-style:normal;text-transform:none;font-variant: normal;">
  <img src="gfsqvgqkrgf1000002.jpg" title="" alt="" style="width:649px;height:254px;">
</p>'''

from bs4 import BeautifulSoup

soup = BeautifulSoup(data, 'lxml')

print(soup.select_one('p:has(img)').find_previous('p').text.strip())

但是请确保它不会影响您之前编写的其他样式

Answer 2

这是由于其重新启动样式表为您正在查看的文档提供了样式。

如果您拉起google元素检查器，则实际上它们在按钮的左侧和右侧总共有2 maring和6px填充。这不适用于您在模板中使用的按钮。

Answer 3

由于您使用的是引导程序4，因此还可以将“ mr-1”类添加到按钮中。这样，您不必更改CSS（除非您想要:)）。

Answer 4

您所描述的间距是当您有多个display:inline-block元素，并且其代码分别在各自的行上创建时会发生什么情况。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p>These buttons will appear with spacing between them.</p>

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

<hr />

<p>These buttons will not.</p>

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

有多种方法可以使用.m-*-*实用程序类或其他自定义CSS手动添加间距。或者，您也可以使用新的一行中的每个按钮简单地输出HTML。