Bootstrap 在一行中设置 4 个元素答案

【问题标题】：Bootstrap 4 set elements in one lineBootstrap 在一行中设置 4 个元素
【发布时间】：2021-05-14 00:14:59
【问题描述】：

我想将链接设置在底部的一行中，例如“链接 1 左下”、“链接 2 中下”、“链接 3 右下”，但“链接 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%;
}

现在的样子

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

删除所有 css 代码并为容器使用 d-flex 和 justify-content-*。

在 flexbox 容器上使用 justify-content 实用程序来更改 flex 项目在主轴上的对齐方式（x 轴开始，y 轴如果 flex-direction: 列）。从开始（浏览器默认）、结束、中心、中间或周围选择。 - Bootstrap

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<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>

【讨论】：

【解决方案4】：

使用此代码：

这使 div 在底部：（就像你说的：left bottom...）

position: fixed;
bottom: 0;
width: 100%;

div{
text-align: center; 
    position: fixed;
    bottom: 0;
    width: 100%;
}
#contact{
   float: left;
    font-size: 20px;
    padding-top: 0.17em;
}

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<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>

【讨论】：

【解决方案5】：

使用 Bootstrap 4 你可以这样做。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" >

<ul class="nav d-flex justify-content-between">
  <li class="nav-item">
    <a class="nav-link active" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
</ul>

更多：https://getbootstrap.com/docs/4.1/components/navs/

【讨论】：

【解决方案6】：

你可以这样做：

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

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

#link {
    padding-top: 0.17em;
    font-size: 30px;
}

<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>

【讨论】：