2.4.3 居左/居右

使用.mr-auto和.ml-auto：让列居左或居右排列，具体参考4.5节。

● .mr-auto：使元素居左排列。

● .ml-auto：使元素居右排列。

● .col-auto：根据内容自适应列宽。

【实例2-13】（文件leftrightgrid.html）

<div class=＂container＂>
    <div class=＂row＂>
        <div class=＂col-md-4＂>.col-md-4</div>
        <div class=＂col-md-4 ml-auto＂>.col-md-4 .ml-auto</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-md-3 ml-md-auto＂>.col-md-3 .ml-md-auto</div>
        <div class=＂col-md-3 ml-md-auto＂>.col-md-3 .ml-md-auto</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-auto mr-auto＂>.col-auto .mr-auto</div>
        <div class=＂col-auto＂>.col-auto</div>
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-19所示。

图2-19 居左/居右排列的效果