Bootstrap 5.0组件右对齐实现方法及me、mb、ml类含义咨询

Bootstrap 5间距类命名规则 #

Bootstrap 5为了适配从右到左（RTL）的书写布局，废弃了Bootstrap 4中用l/r表示左右的间距命名规则，统一改为s（start，起点）/e（end，终点），具体含义如下：

• 首字符m代表margin（外边距），如果是p则代表padding（内边距）
• 第二个字符代表方向：
  • s：start，常规LTR布局下对应左侧
  • e：end，常规LTR布局下对应右侧
  • t：top，对应顶部
  • b：bottom，对应底部
    你提到的三个类含义分别是：
  • me-*：常规布局下对应margin-right: *
  • mb-*：对应margin-bottom: *
  • ml-*：是Bootstrap 4的旧语法，对应margin-left: *，Bootstrap 5中已失效

三种尝试写法未生效的原因 #

1. <ul class="navbar-nav justify-content-end">
justify-content是Flex布局的容器属性，需要设置在父级Flex容器（也就是你代码里class为navbar的div元素）上才会生效，你给作为Flex子项的ul设置这个属性不会起作用。
2. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
me-auto是给右外边距设为自动，作用是把元素往左侧推，和你要的右对齐效果完全相反，自然无法实现需求。
3. <ul class="navbar-nav ml-auto">
   这是Bootstrap 4的写法，Bootstrap 5已经把左外边距自动的类名改为ms-auto，ml-auto在Bootstrap 5中没有对应样式，所以失效。

ms-auto的含义 #

ms-auto即margin-start: auto，在常规LTR布局下等价于margin-left: auto，会自动填充元素左侧的所有剩余Flex空间，直接把元素挤到容器的最右侧，刚好实现导航栏列表右对齐的效果。

Bootstrap 5导航栏右对齐的标准写法 #

你现在用ms-auto的方案就是正确的，只需要把你的ul标签的class修改为如下即可：

<ul class="navbar-nav ms-auto">

内容的提问来源于stack exchange，提问作者Priyanka