我有一个片段:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<header>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="logo">
<img src="#" alt=" logotype">
</div>
</div>
<div class="col-lg-9">
<div class="head-buttons mr-auto">
<a href="">Русский</a>
<div class="auth-buttons">
<button>Войти</button>
<button>Регистрация</button>
</div>
</div>
</div>
</div>
</div>
</header>
字符串
我想col-lg-9在这个div的所有内容对齐到正确的.为什么mr-auto
不工作?我怎么能修复它?我试过和justify-content-end
行,不工作。.
7条答案
按热度按时间ljsrvy3e1#
在bootstrap 5中,使用
ms-auto
代替ml-auto
,使用me-auto
代替mr-auto
。字符串
kupeojn62#
自动边距适用于flexbox容器,但
col-lg-9
不是flexbox容器。使用d-flex
将其设置为flexbox容器,然后**ml-auto
将内容推到右侧**。字符串
另一个选择是使用
col-lg-auto
来缩小右列的宽度,然后ml-auto
也可以在列上工作。型
https://www.codeply.com/go/4n4R9cNrqE
sxissh063#
MR-AUTO用于将margin-rightauto设置为不使用内容向右对齐。
您希望在col-lg-9中将内容向右对齐,因此需要使用col-lg-9将类添加到text-right。
谢谢
ao218c7q4#
你应该使用类float-right和d-flex而不是mr-auto。
3npbholx5#
有时候最好使用style标签来设置style=“margin-left:auto”,然后它就可以完美地工作了。
krugob8w6#
字符串
mbskvtky7#
我建议将.ml-* 和.mr-* 重命名为.ms-* 和.me-*。
https://getbootstrap.com/docs/5.3/migration/#utilities-3