Question

这两个引导按钮彼此接触。我是否需要添加一些自定义CSS在它们之间留出一些空间？ https://getbootstrap.com/docs/4.1/components/buttons/处的文档不会互相碰触。

onUserLoggedIn() {
        return this.isLoggedIn.asObservable();
      }

StackBlitz https://stackblitz.com/edit/js-u5zg9m

Answer 1

按钮彼此触摸是因为您将它们放在btn-toolbar中（通过btn-group可以做到这一点）。您既可以删除它，也可以使用CSS添加边距。

Answer 2

您可以添加：

    <div class="btn-toolbar" style="display: inline">

使您的代码如下所示：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <form>
    <div class="btn-toolbar" style="display: inline">
      <button type="submit" class="btn btn-primary">Submit</button>
      <button type="reset" class="btn btn-secondary">Reset</button>
    </div>
  </form>
</div>

Answer 3

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet" 
integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
crossorigin="anonymous">
<div class="container-fluid">
    <form>
       <div class="btn-toolbar">
           <button type="submit" class="btn btn-primary mr-1">Submit</button>
           <button type="reset" class="btn btn-secondary">Reset</button>
       </div>
    </form>
</div>

只需在提交按钮上使用mr-1或在重置按钮上使用ml-1即可添加空白

为什么这些自举按钮彼此接触？

3 个答案: