Javascript 柱宽异常
我试图创建一个使用引导的设计,它有一个固定的顶部导航栏,下面有两列。第一列有一个固定的顶部div,该div具有完整的父级宽度,下面有更多可以滚动的内容(固定div和导航栏超高)。第二列有一个覆盖整个列的图像,仅此而已 我已经做了以下工作:Javascript 柱宽异常,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我试图创建一个使用引导的设计,它有一个固定的顶部导航栏,下面有两列。第一列有一个固定的顶部div,该div具有完整的父级宽度,下面有更多可以滚动的内容(固定div和导航栏超高)。第二列有一个覆盖整个列的图像,仅此而已 我已经做了以下工作: <nav class="navbar navbar-default navbar-fixed-top black"> <div class="container-fluid"> <!-- Brand and toggl
<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>
以下是一些相关的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;
}
结果是:
如您所见,文本“fixed sidebar”位于fixed div(#head section
)的后面。这是因为JS将其宽度设置为1001px,这是错误的,根据chrome的inspect元素,它告诉我它只有900px
我做错了什么?我应该如何解决
这里是引导层:您将#头部部分的宽度设置为等于父部分的宽度,然后向其添加100px的填充(每侧50 px)
有关更多信息,请参阅此链接:
使用标准定位(position:static;
或position:relative;
)如果要将#头部部分设置为{display:block;}
(省略宽度:100%
),则会自动将其设置为填充100%的可用水平空间,然后你的填充物会被推进去而不是推出来
但是,在这种情况下,由于您使用的是位置:fixed
,因此最简单的解决方案是使用现有的javascript和html(仍然从#head section
属性中删除宽度:100%
),但将#head section
包装在另一个容器元素中(为了代码的易读性,可能是一篇文章
)
从那里,您可以将javascript更新为:
$(function() {
var new_width = $('#content').width();
$('article').width(new_width);
});
请参阅fiddle:好,所以有两种方法可以解决您的问题
JQuery解决方案
#head-section {
width: inherit;
}
用outerWidth
$(function() {
var new_width = $('#content').outerWidth();
$('#head-section').outerWidth(new_width);
});
CSS解决方案
#head-section {
width: inherit;
}
只需替换width:100%
widthwidth:inherit
#head部分
#head-section {
width: inherit;
}
你为什么需要JS?Bootstrap似乎在为你处理这个问题?@TahaPaksu没有。头部分的div是位置:固定的,我需要div是col-md-8
的宽度,至少据我所知,没有JS是不可能的。在固定div之后创建一个虚拟的col-md-8,这样就可以排序了我猜。@TahaPaksu不起作用。你能在bootply.com上发布你的代码吗?我去掉了填充物,使之成为框大小:border box;
,但仍然没有效果。我也添加了显示:block;
,但什么都没有发生。当我去掉宽度:100%时,它没有覆盖空间,反而缩小了。再给我一次-处理小提琴。Remov单击位置:fixed
会将其放回DOM。检查我的bootply链接。还有一件事,为什么会无缘无故地出现垂直滚动条?这是因为边距顶部:80px;到。容器流体将边距顶部从容器fuild移除,并将填充顶部添加到主体:)