提问人：MyselfAndOnlyMe 提问时间：6/9/2022 更新时间：6/9/2022 访问量：149
引导列未按预期工作
Bootstrap columns not working as intended
问：
我想创建一个带有引导程序的菜单，但“col”类似乎没有按预期工作。 这是html代码：
<div class="logo col">
<a href="index.html"><img src="Content/Logo.png" class="logo"/></a>
</div>
<div class="menu col">
<ul>
<li><a href="index.html" class="GradientText">Accueil</a></li>
<li><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
<li><a href="Views/Contact.html" class="GradientText">Contact</a></li>
</ul>
</div>
类菜单和徽标都是在我自己的 css 文件中定义的。
使用 Bootstrap 5.1.3
这是它给我的：
答：
0赞
joohong89
6/9/2022
#1
用类包装它row
Bootstrap 5 使用 flex。 是列的包装器，并为要相应调整大小的列提供属性。rowdisplay: flex
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="row">
<div class="logo col">
<a href="index.html"><img src="https://via.placeholder.com/80" class="logo"/></a>
</div>
<div class="menu col">
<ul >
<li class="d-inline"><a href="index.html" class="GradientText">Accueil</a></li>
<li class="d-inline"><a href="Views/Portfolio.html" class="GradientText">Portfolio</a></li>
<li class="d-inline"><a href="Views/Contact.html" class="GradientText">Contact</a></li>
</ul>
</div>
</div>
评论