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

Question

我有一个两栏布局，一栏是文档内容，另一栏是导航。我使用 Bootstrap 行对此进行了设置，一列为 8 个单位宽，另一列为 3 个单位宽，偏移量为 1 个单位。我已将导航内容设置为固定，以便它保留在页面上。

在某些页面上，我希望在导航栏的顶部有一个图像。我希望此图像具有响应性并保持在 3 单位列内并与导航一起固定。但是，当您将内容设置为固定时，图像不再受限于 3 个单位的列。

我已经在 http://jsfiddle.net/yKUZW/3/ 设置了问题的 jsfiddle .

这是示例 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 的父级相同的宽度吗>(宽度:25%)？一旦我们解决了这个问题，图像就会对齐。

您可能已经知道 fixed positioning :

for a fixed positioned box, the containing block is established by the viewport

意思是 Fixed 总是相对于父窗口，而不是元素。

简单的解决方案

如果视口(viewport)与父 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 占父级宽度的 100% (.col-xs-3):

#navbar {
    background: yellow;
    position: relative;
}

已修复 - div 占据了 100% 的屏幕 - 我们自己应用 .col-xs-3 宽度:

#navbar {
    background: yellow;
    position: fixed;
    width: 25%;
}

Demo in Fiddle

更好的解决方案

但是，该解决方案对我们帮助不大，因为 .container类将不同断点处的可变宽度应用于行。这会导致 25% 的父 div 和 25% 的视口(viewport)不同步。

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

要回答这个问题，让我们看看 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 */
  }
} 

这是使用相对位置与固定位置和样式的并排比较:

Demo in Fiddle

回到我们手头的问题:

只需从上面获取演示并添加回我们的响应图像:

Solution Demo in Fiddle

---

注意:大多数网站在使用 position:fixed 时选择使用固定宽度的侧边导航栏，以避免此类问题。