引导组按钮和文本，但它们之间有空格

Question

您好，我希望文本和按钮必须位于一行而不是彼此下方。 首先我做了这个

<div class="btn-group" role="group" aria-label="Basic example"><p>Document2.pdf</p><button type="button" class="btn btn-primary">Download</button></div><br>

但这将按钮和文本彼此相邻，没有间距。 因此，我使用了btn-toolbar而不是btn-group ，但这会将项目放在一起。

<div class="btn-toolbar" role="group" aria-label="Basic example"><p>Document1.pdf</p><br><button type="button" class="btn btn-primary">Download</button></div><br>

我尝试添加flex-wrap: nowrap但这不起作用。 有谁知道如何解决这个问题并正确对齐它们？

Answer 1

为什么不添加margin-right ？

请参阅下面的片段。

 p { margin-right: 16px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="btn-group" role="group" aria-label="Basic example"> <p>Document2.pdf</p><button type="button" class="btn btn-primary">Download</button> </div>