css - 给列容器的宽度

Question

是否有可能为 bootstrap 4 col 提供其子容器类的宽度？

<div class="container-fluid">
    <div class="row">
        <div class="col bg-secondary m-0 p-0">
            text left
        </div>
        <div class="col-auto bg-primary">
            <div class="container bg-primary m-0 p-0">
                text mid
            </div>
        </div>
        <div class="col bg-secondary m-0 p-0">
            text right
        </div>
    </div>
</div>

我基本上希望能够将内容放在容器的左侧和右侧，但我不希望我的容器因此改变大小，因为左右内容不会出现在每个容器上页面，我想要一个一致的跨页面容器宽度。

https://jsfiddle.net/5gt9uoqb/

更新:

这是我想要实现的图像:ibb.co/tcKM6S0 .底部是一个“普通”页面，带有居中容器。这是一个带有 Bootstrap 附带的标准容器类的 div。顶部是我想创建的新页面类型。它应该与其他页面具有完全相同的容器，但我希望能够将内容放在灰色区域，例如一些社交图标(img 中的蓝色)。由于其他原因，在我的设置中也不能将普通页面包装在一列中。

Answer 1

如果您了解 position 属性，那么您可以在不接触容器类的情况下处理这个问题。为此，您需要所有子元素的父类。我的意思是在 body 标签之后你上课并给它相对位置你想要留下的内容给它绝对位置和 left:0px;(你可以根据你的左边空间)，如果你想要内容那么你说对了:0px；