我在 bootstrap 4 中使用了以下标签。
<div class="container">
<div class="row align-items-center">
<div class="col-md-3">
<div class="right-user-account" >
<a href="#">User Account</a>
</div>
</div>
<div class="col-md-6">
<img src="images/logo.png">
</div>
<div class="col-md-3">
<div class="left-login" >
<a href="#">Login</a>
</div>
</div>
</div>
</div>
我想要带有徽标的全角
如何使用重新排序命令?
Bootstrap 4 使用 flex/flexbox。所以是的,您可以选择对元素/列进行排序。
我认为你想要的是只使用 Bootstrap-4 类order-{number}
和你的col
类。
下面是解决方案:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row align-items-center">
<div class="col-md-3 col order-2 order-sm-1">
<div class="right-user-account">
<a class="fd-head-login" href="#">
<i class="fa fa-caret-down"></i>User Account</a>
</div>
</div>
<div class="col-md-6 text-center col-md-6 order-1 order-sm-2">
<a href="#">
<img src="images/logo.png">
</a>
</div>
<div class="col-md-3 order-3">
<div class="left-login">
<a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>
</div>
</div>
</div>
</div>
你可以找到更多here.
Codepen 链接到游戏屏幕宽度
希望这个回答对您有帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)