比较来自世界各地的卖家的域名和 IT 服务价格

Bootstrap 4 将物品放在一行中

例如,我想在底部的一行中设置引用 "关联 1 留下来", "Link 2 center bottom", "Link 3 right bottom", 但 "Link 2" 不集中 PC 和移动设备。

HTML:


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


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


https://i.stack.imgur.com/p86Fm.jpg
已邀请:

奔跑吧少年

赞同来自:

您可以使用 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/
/

要回复问题请先登录注册