时间戳

首页 > 解决方案 > 如何使用css在按钮之间水平放置空格？

html - 如何使用css在按钮之间水平放置空格？

问题描述

在此处输入图像描述当按钮移动到第二行时，它们相互连接并且看起来不太好，我想在按钮之间水平放置空间。

      <div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="top"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="left"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on left">
        Data Science
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="bottom"
        ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on bottom">
        FInance
    </button>
    &nbsp;
    <button type="button" class="btn btn-outline-danger btn-round" placement="right"
    ngbPopover="Here will be some very useful information about this popover." 
    popoverTitle="Popover on right">
    Human Resource
    </button>
    &nbsp;
    

      </div>

标签： htmltwitter-bootstrapbootstrap-4

解决方案

为每个按钮添加 mb-3 类（如之前的评论中所述），我还将添加 mr-3 类（或 mr-2）而不是（&nbsp;这只是更好的实践和引导程序的使用）。

像这样：

<div class="container">
    <div class="tim-title">
        <h3>What intrests you?</h3>
    </div>

    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="right" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on right">
        Artificial Intelligence
    </button>
    <button type="button" class="btn btn-outline-danger btn-round mb-3 mr-3" placement="top" ngbPopover="Here will be some very useful information about this popover." popoverTitle="Popover on top">
        Management
    </button>
    
    ...
</div>

推荐阅读