Bootstrap 4 将物品放在一行中

您可以使用 bootstraps build 在课堂上

d-flex

和

justify-content-between

, 轻松实现它。

<link crossorigin="anonymous" href="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"]https://stackpath.bootstrapcdn ... ot%3B[/url] integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" rel="stylesheet"/>

<div class="d-flex justify-content-between">

<a href="/contact" id="contact">Link 1</a>

<a href="/repo" id="link">Link 2</a>

<a href="/json" id="api">Link 3</a>

</div>

使用

灵活的

管道管道
http://getbootstrap.com/docs/4.1/utilities/flex/
/

flex-md-row

: 显示 inline 用于中型和大型设备

https://i.stack.imgur.com/5HkNs.png
2.

Flex-栏

: 要在移动设备中的列中显示

https://i.stack.imgur.com/qeIXf.png

<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet">

<div class="d-flex flex-md-row flex-column justify-content-between text-center">

<a href="/contact" id="contact">Link 1</a>

<a href="/repo" id="link">Link 2</a>

<a href="/json" id="api">Link 3</a>

</div>

</link>

你可以这样做：

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 href="/contact" id="contact">Link 1</a>

<a href="/repo" id="link">Link 2</a>

<a href="/json" id="api">Link 3</a>

</div>

删除整个代码 css 和使用

d-flex

和

justify-content-*

适用于容器。

使用实用程序 justify-content 在集装箱里 flexbox, 更改元素对齐 flex 在主轴上 /这里 x 开始，轴 y 为方向 flex: 柱子/. 从“开始”菜单中选择 /默认浏览器/, 结束，中心，之间。 - 初始加载

<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>

<div class="d-flex justify-content-between">

<a href="/contact" id="contact">Link 1</a>

<a href="/repo" id="link">Link 2</a>

<a href="/json" id="api">Link 3</a>

</div>

使用此代码

:

它确实如此 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 href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]

<script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

<div>

<a href="/contact" id="contact">Link 1</a>

<a href="/repo" id="link">Link 2</a>

<a href="/json" id="api">Link 3</a>

</div>

使用 Bootstrap 4, 你可以以这种方式做到这一点。

<link href="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"]https://stackpath.bootstrapcdn ... ot%3B[/url] rel="stylesheet"/>

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