html - Bootstrap 在一行中设置 4 个元素

Question

我想在底部的一行中设置链接，例如“Link 1 left bottom”、“Link 2 center bottom”、“Link 3 right bottom”，但“Link 2”不以 PC 和移动设备为中心。

HTML：

            <div>
                <a id="contact" href="/contact">Link 1</a>
                <a id="link" href="/repo">Link 2</a>
                <a id="api" href="/json">Link 3</a>
            </div>

CSS：

#contact{
    float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

#api{
    float: right;
    font-size: 20px;
    padding-top: 0.17em;
}

#link{
    display: inline;
    font-size: 30px;
    padding-right: 2.5%;
}

现在的样子

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以在类中使用引导程序构建d-flex并justify-content-between轻松实现。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="d-flex justify-content-between">
  <a id="contact" href="/contact">Link 1</a>
  <a id="link" href="/repo">Link 2</a>
  <a id="api" href="/json">Link 3</a>
</div>