我正在尝试使用 bootstrap 创建一个设计,它有一个固定的顶部导航栏,下面有 2 列。第一列有一个固定的顶部 div,具有完整的父宽度和更多可以滚动的内容(固定的 div 和导航栏倾斜)。第二列有一张图片覆盖了整列,仅此而已。
我做了以下事情:
<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">SPONSORS</a></li>
<li><a href="#">DASHBOARD</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
<a href="#" class="red">EDIT DETAILS</a>
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>
有了这个小 JS:
$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});
这是一些相关的 CSS:
#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}
如您所见,文本“固定侧边栏”位于固定 div(#head-section
) 后面。那是因为 JS 将其宽度设置为 1001px,根据 chrome 的检查元素告诉我它只有 900px,这是错误的。
我做错了什么,我应该如何解决?
这是 Bootstrap :http://www.bootply.com/0xIGx67IzM
最佳答案
好的,有两种方法可以解决您的问题
JQuery 解决方案
用outerWidth
改变宽度
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS 解决方案
只需替换#head-section中的width:100%
width width:inherit
#head-section {
width: inherit;
}
关于javascript - 列宽异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38582907/