[英]100% width on navigation in a column overflows the page in bootstrap 3
I can't seem to strech my navigation to 100% of the column. 我似乎无法将导航范围扩大到专栏的100%。
If I use width:100% the navigation streches all over the page. 如果我使用width:100%,那么导航将遍及整个页面。
Do I have to set the width manually for every screen size? 是否必须为每个屏幕尺寸手动设置宽度?
This is for a school and we are forced to use bootstrap 3. 这是针对一所学校的,我们被迫使用引导程序3。
<div class="container">
<div class="row">
<div id="left" class="col-sm-2 hidden-xs">
<ul id="navigation" class="nav nav-stacked affix">
<li><a href="#">Fixed navigation</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="right" class="col-sm-10">
<h1>Some text</h1>
</div>
</div>
#right {
background-color: lightblue;
}
#left { /* For showing the column width */
background-color: orange;
height: 100vh;
}
#navigation{
background-color: lightgreen;
height: 100%;
width: 100%;
}
Here is better look at it. 这里最好看看。 https://www.bootply.com/TKjfHrza8M https://www.bootply.com/TKjfHrza8M
Try using fit-content for height and width. 尝试使用适合内容的高度和宽度。 Add padding, if needed. 如果需要,请添加填充。
#navigation{
background-color: lightgreen;
height: fit-content;
width: fit-content;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.