Bootstrap 4如何将元素设置在同一行

Question

我希望在底部将链接设置在同一行上，例如“左下角链接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%;
}

现在的样子

- ChunkCoder

Answer 1

您可以使用Bootstrap内置的类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

Answer 2

移除所有的CSS代码，使用d-flex和justify-content-*来设置容器。在flexbox容器上使用justify-content实用程序可以更改主轴上（x轴开始，如果flex-direction: column，则为y轴）的flex项目的对齐方式。可选择从start（浏览器默认值），end，center，between或around。- 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>

- mahan

Answer 3

使用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/

- RAJNIK PATEL

Answer 4

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

Answer 5

使用这段代码：

这会将 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>

- לבני מלכה

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

- Gregor Ojstersek