2.3.4 可变宽度内容

读者使用.col-X-auto（其中 X 为 xs、md、lg、xl）或.col-auto 类，可以设置根据内容调整列的宽度。

【实例2-5】（文件autogrid.html）

<div class=＂container＂>
    <div class=＂row justify-content-md-center＂>
        <div class=＂col col-lg-2＂>第1列</div>
        <div class=＂col-md-auto＂>根据内容调整宽度</div>
        <div class=＂col col-lg-2＂>第3列</div>
    </div>
    <div class=＂row＂>
        <div class=＂col＂>第 1列</div>
        <div class=＂col-md-auto＂>根据内容调整列宽</div>
        <div class=＂col col-lg-2＂>第3列</div>
    </div>
</div>

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

图2-10 可变宽度内容—大屏设备显示效果

图2-11 可变宽度内容—中屏显示效果

说明：

● .col-md-auto用于设置中屏设备，根据内容自动改变列宽。因为栅格系统向上兼容，所以在中屏、大屏和超大屏设备上有相同的效果。

● .justify-content-md-center用于设置中屏以上为水平居中。所以当在大屏设备显示时，由于第1列和第3列均为col-lg-2，占了2格，而呈现图2-11所示的效果。