Question

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

.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 div设置100％的宽度？这将占用浏览器窗口的宽度，因为其位置固定。尝试将其添加到.sidebar：

position: relative;

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

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

Answer 2

您可以将宽度设置为自动因此它占用了父标签的宽度

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

无法将宽度应用于Bootstrap网格系统内的div标签

2 个答案: