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

Question

我尝试添加width:100%到div标签，它在bootstrap网格系统中(col-lg-3)。但是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>

​

Answer 1

你正在尝试设置你的.wrapping目录的100%宽度吗？这将采用浏览器窗口的宽度，因为它的位置是固定的。尝试将以下内容添加到.sidebar：

position: relative;

这将使包装采用侧边栏的宽度。

编辑:尝试使用位置粘滞而不是固定位置。这样，包装将遵循其父对象的宽度。我为此创建了一个小提琴：jsfiddle.net/Lj8dqnwe

Answer 2

您可以将宽度设置为auto，以便它采用父标记的宽度

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