zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    当函数中传递的参数数量不定时,获取传递给函数的参数信息
    redis分页摘抄
    redis分页
    返回数组中指定的一列,将键值作为元素键名array_column
    PHP操作Redis常用技巧总结
    php面试中的经典问题
    php 依赖注入的实现
    10分钟快速理解依赖注入
    PHP 依赖注入,依赖反转 (IOC-DI)
    PHP控制反转(IOC)和依赖注入(DI)
  • 原文地址:https://www.cnblogs.com/lxgbky/p/15603096.html
Copyright © 2011-2022 走看看