仅在折叠位置时如何设置 Bootstrap 5 导航栏的样式？

Posted 2023-03-05

【中文标题】仅在折叠位置时如何设置 Bootstrap 5 导航栏的样式？

【英文标题】：How can I style a Bootstrap 5 Navbar when only in collapsed position?

【发布时间】：2022-01-21 14:19:48

【问题描述】：

我正在使用 Bootstrap 5，我试图在导航栏折叠时左对齐导航栏社交图标（适用于小型/移动设备），但在大屏幕上查看时右对齐。

您能否帮助确定要设置样式的选择器？同样，我只希望在导航栏折叠时图标左对齐。

我的导航栏示例在这里：https://www.codeply.com/p/4zgJqBtILT

Navbar Example Screenshot

谢谢！

【参考方案1】：

添加到 UL 标记 justify-content-start justify-content-lg-end 并将 float-sm-end 类更改为 float-xl-end

<ul class=" col-md-4 col-sm list-unstyled justify-content-start justify-contentxl-end d-flex float-xl-end">

【讨论】：

谢谢你，@richard。更正答案中的一个小错字：<ul class="col-md-4 col-sm list-unstyled justify-content-start justify-content-lg-end d-flex float-xl-end">