如何用Bootstrap v4实现主内容与右侧栏的自定义列比例？

给你几个实用的解决办法，轻松实现介于9/3和10/2之间的布局比例：

方法一：直接自定义列宽（最直观） #

Bootstrap的row是flex容器，直接给主内容和侧边栏设置自定义百分比宽度，确保总和为100%即可。比如主内容占79%、侧边栏占21%，刚好卡在你要的区间里。

内联样式快速测试版 #

<div class="container">
    <div class="row">
        <div class="col" style="width: 79%;">
            <h1 class="mt-2">My Title</h1>
            <?= $this->fetch('content') ?>
        </div>
        <div class="col right-column" style="width: 21%;">
            <?= $this->element('right-column-home'); ?>
        </div>
    </div>
</div>

独立CSS类规范版 #

先在样式表中定义类：

.main-content {
    width: 79%;
}
.right-column {
    width: 21%;
}

再修改HTML：

<div class="container">
    <div class="row">
        <div class="col main-content">
            <h1 class="mt-2">My Title</h1>
            <?= $this->fetch('content') ?>
        </div>
        <div class="col right-column">
            <?= $this->element('right-column-home'); ?>
        </div>
    </div>
</div>

方法二：用Flex的比例分配（自适应友好） #

利用flex布局的flex-grow属性，通过设置比例值来分配空间。比如主内容设flex-grow:9，侧边栏设flex-grow:2.5，这样主内容占比≈78.26%，侧边栏≈21.74%，符合你的需求。

<div class="container">
    <div class="row">
        <div class="col" style="flex-grow: 9;">
            <h1 class="mt-2">My Title</h1>
            <?= $this->fetch('content') ?>
        </div>
        <div class="col right-column" style="flex-grow: 2.5;">
            <?= $this->element('right-column-home'); ?>
        </div>
    </div>
</div>

同样可以把flex-grow的值写到CSS类里，方便复用。

方法三：基于Bootstrap列类微调（适合习惯原生列的场景） #

如果你不想完全脱离Bootstrap的列系统，可以基于col-9和col-2做宽度微调，用calc()计算扩展宽度：

<div class="container">
    <div class="row">
        <div class="col-9" style="width: calc(75% + 4.33%);">
            <h1 class="mt-2">My Title</h1>
            <?= $this->fetch('content') ?>
        </div>
        <div class="col-2" style="width: calc(16.66% + 4.34%);">
            <?= $this->element('right-column-home'); ?>
        </div>
    </div>
</div>

不过这种方法需要精确计算，不如前两种灵活，仅作备选。

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