bootstrap5 位置align

bootstrap5位置总结

1.text 位置控制

.text-left    Align your text content to the left position using this class.
.text-right    Right align the text content position using this class
.text-center    If you want to make text align to the center position, you can use this class.
.text-justify    Justify align the text content using this class.
.text-nowrap    The text will never wrap to the next line until you use the <br> tag.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

• end
  The same as right if direction is left-to-right and left if direction is right-to-left.

• right
  The inline contents are aligned to the right edge of the line box.

 

 2、Aligning items to left, right, and center within the Navbar

这是block级别的class, 用在<div>上面

The .mx-auto class can be used to align the items to the center of the navbar.
The .ms-auto class is used to align items to the right of the navbar.
The .me-auto class is used to align items to the left of that navbar.

• b4:  ml-auto => b5:ms-auto (start)
• b4:  mr-auto => b5:me-auto (end)

          <div class="mx-auto">
            <a class="navbar-brand " href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
        </div>

 

 

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

　　

3、v4旧版本与v5新版本区别

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu--left => dropdown-menu--start
dropdown-menu--right => dropdown-menu--end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end

ml-* => ms-*
pl-* => ps-*
mr-* => me-*
pr-* => pe-*
text-left => text-start
text-right=> text-end
float-left => float-start
float-right=> float-end
border-left => border-start
border-right=> border-end
rounded-left => rounded-start
rounded-right=> rounded-end
dropleft => dropstart
dropright=> dropend
dropdown-menu--left => dropdown-menu--start
dropdown-menu--right => dropdown-menu--end
carousel-item-left => carousel-item-start
carousel-item-right=> carousel-item-end

 

v4 : pull-right

v5:   float-end

 

 

                        <a :href=" row.file_url " :target="row.target||'_blank'">{{ row.otitle }}</a>
                            <span class="float-end" >{{ row.publishdate }}</span>
                        </div>