我有两列布局,一列是文档内容,另一列是导航。我使用Bootstrap行设置了这个,一列是8个单位宽,另一个是3个单位宽,偏移量是1个单位。我已将导航内容设置为固定,以便它保留在页面上。
在某些页面上,我希望在导航栏顶部显示图像。我希望这个图像能够响应并保持在3个单位列中,并与导航一起修复。但是,当您将内容设置为固定时,图像不再受限于3单位列。
我在http://jsfiddle.net/yKUZW/3/设置了问题的方法。
以下是html示例:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content goes here...</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed">
<img class="img-responsive" src="http://placekitten.com/300/200">
Some links go here.
</div>
</div>
</div>
</div>
相关的css:
.fixed {
position: fixed;
top: 150px;
}
请注意,当页面水平调整大小时,图像会拉伸到浅灰色容器区域之外。我想要的是图像的右侧始终与容器的右手边精确对齐,根据需要调整图像大小。
我将如何完成这项工作?
答案 0 :(得分:7)
忽略图像一秒...... .img-responsive
只会使图像占据父容器中100%的可用空间。
然后问题就变成了,我可以将position: fixed
添加到div并仍然占用与其父.col-xs-3
(width: 25%
)相同的宽度吗?一旦我们解决了这个问题,图像应该排成一行。
您可能已经了解fixed positioning:
对于固定定位的框,包含块由视口
建立
如果视口的宽度与父div相同,则可以通过以下方式解决:
<强> HTML 强>:
<div class="row">
<div class="col-xs-9" id="content">C</div>
<div class="col-xs-3">
<div id="navbar">Navbar</div>
</div>
</div>
Relative
- div占父级宽度(.col-xs-3
)的100%:#navbar {
background: yellow;
position: relative;
}
Fixed
- div占据屏幕的100% - 自己应用.col-xs-3
宽度:#navbar {
background: yellow;
position: fixed;
width: 25%;
}
但是,该解决方案对我们没什么帮助,因为.container
类将不同断点处的变量宽度应用于行。这会导致25%的父div和25%的视口失去同步。
要回答这个问题,让我们看看what .container is doing:
.container {
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
}
因此,我们现在必须模仿.container应用的宽度,而不是通常能够应用25%
宽度。以下是:
这里有一些示例标记:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1" id="sidebar-outer">
<div id="sidebar">
Width: <span id="width-placeholder"></span>px
</div>
</div>
</div>
</div>
现在我们可以使用以下 CSS :
在所有断点处应用宽度#sidebar {
background: yellow;
position: fixed;
width: 25%;
}
@media (min-width: 768px) {
#sidebar {
width: 158px; /* 632 * .25 */
}
}
@media (min-width: 992px) {
#sidebar {
width: 213px; /* 852 * .25 */
}
}
@media (min-width: 1200px) {
#sidebar {
width: 263px; /* 1052 * .25 */
}
}
这里使用相对与固定位置和样式进行并排比较:
只需从上方获取演示并添加回我们的响应式图像:
作为备注:大多数网站在使用position:fixed
时选择使用固定宽度的侧边栏,以避开这些问题。
答案 1 :(得分:0)
稍微弄清楚它后,我认为最好的方法是从引导列中删除固定div,并将其放在dom中,或者至少在行外部。有很多负余量和奇怪的填充内容,以使BS cols正常工作,它正在推动你的固定div。如果它是我,这将成为网站上的一个主要功能,我将制作一个宽度为100%的div,abs pos,左上角的右下角全部为0,然后将固定的div放在其中。对于固定的pos div,您希望它居住在相对pos父级中,右侧设置为0,顶部设置为150。如果父级是窗口宽度的100%,那么您可以使用px或%很好地控制它的位置。
答案 2 :(得分:0)
感谢Kyle在顶部描述的惊人解决方案。 这是普通容器(非流体)中8/4情况的解决方案
<div class='container'>
<div class='row'>
<div class='col-xs-8> something here </div>
<div class='col-xs-4>
<div id='sidebar'> content
</div>
</div>
</div>
</div>
这里是css
#sidebar {
background: blue;
position: fixed;
width: 33.3333%;
}
@media (min-width: 768px) {
#sidebar {
width: 235px;
}
}
@media (min-width: 992px) {
#sidebar {
width: 309px;
}
}
@media (min-width: 1200px) {
#sidebar {
width: 375px;
}
}