无法将宽度应用于引导网格系统内的 div 标签答案

【问题标题】：Can't apply width to div tag inside bootstrap grid system无法将宽度应用于引导网格系统内的 div 标签
【发布时间】：2019-04-26 20:21:44
【问题描述】：

我尝试将 width:100% 添加到引导网格系统 (col-lg-3) 内的 div 标签。但是 div 占据了整个浏览器的宽度。它不需要 100% 的父级宽度（col-lg-3）。

.sidebar {

    color: #fff;
    font-weight: bold;
    font-size: 18px;
     background-color: green; 
}

.wrapping {
    width: 100%;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}

<div class="row">
        <div class="sidebar col-lg-3">
            <div class="wrapping">
                <a href="javascript:void(0)" class="close_menu">Close Menu</a>
                <div>
                    <h3>Company</br>Name</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Showcase</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Designers</a></li>
                        <li><a href="#">Packages</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main col-lg-9"></div>
        </div>

【问题讨论】：

重复：stackoverflow.com/a/55547172/8620333
您可能正在寻找粘性（例如：stackoverflow.com/q/54518584/8620333）

标签： html css

【解决方案1】：

您是否尝试将 .wrapping div 设置为 100% 宽度？这将占用浏览器窗口的宽度，因为它的位置是固定的。尝试将其添加到 .sidebar：

position: relative;

这将使包装占据侧边栏的宽度。

编辑：尝试使用固定位置而不是固定位置。这样包装将尊重其父级的宽度。我为此创建了一个小提琴：jsfiddle.net/Lj8dqnwe

【讨论】：

但是我希望这个侧边栏固定在浏览器的左侧。另外，为什么我不能将宽度设置为固定位置？
“将宽度设置为固定位置”是什么意思？您不能将宽度设置为固定位置。固定位置将始终相对于视口。如果您不希望它相对于父级，则必须赋予该父级相对位置。在此处查看更多信息：w3schools.com/css/css_positioning.asp
我的意思是这个侧边栏需要固定在浏览器的左侧。所以我需要使用“位置：固定”以及如何设置.wrapping div相对于父（.sidebar）宽度的宽度
好吧，我想我现在明白你的问题了。尝试使用位置粘性而不是位置固定。这样包装将尊重其父级的宽度。我为此创建了一个小提琴：jsfiddle.net/Lj8dqnwe

【解决方案2】：

您可以将宽度设置为自动所以它需要父标签的宽度

.wrapping {
    width: auto;
    padding-left: 32px;
    position: fixed;
    background-color: red;
}

【讨论】：