将响应图像添加到Bootstrap列中固定div的位置

Question

我有两列布局,一列是文档内容,另一列是导航.我使用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;
}

请注意,当页面水平调整大小时,图像会拉伸到浅灰色容器区域之外.我想要的是图像的右侧始终与容器的右手边精确对齐,根据需要调整图像大小.

我将如何实现这一目标？

Answer 1

问题

忽略图像一秒钟... .img-responsive只是使图像占据父容器中可用空间的100%.

那么问题就变成了,我可以添加position: fixed到一个div并且仍然占用与它具有.col-xs-3(width: 25%)的父级相同的宽度吗？一旦我们解决了这个问题,图像应该符合要求.

您可能已经知道固定定位:

对于固定定位的框,包含块由视口建立

含义固定始终相对于父窗口,而不是元素.

简单解决方案

如果视口的宽度与父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占用parent(.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%的视口失去同步.

那么我们怎样才能让它们再次同步？

要回答这个问题,让我们看看.container到底在做什么:

.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;
    }
}

因此25%,我们现在必须模仿.container 应用的宽度,而不是平凡地应用宽度.这是如何做:

这是一些示例标记:

<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以避开这些类型的问题.