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%;
}

现在的样子

原文由 ChunkCoder 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 baao 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 d-flex http://getbootstrap.com/docs/4.1/utilities/flex/

1. flex-md-row ：用于显示中型和大型设备的内联

2. flex-column : 用于在移动设备中显示在列中

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex flex-md-row flex-column justify-content-between text-center">
  <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>

原文由 Saurabh Mistry 发布，翻译遵循 CC BY-SA 4.0 许可协议