Html 向引导列中的位置固定div添加响应映像

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

在一些页面上，我希望在导航栏的顶部有一个图像。我希望这张图片是有反应的，并停留在3个单位的列，并与导航固定。但是，将内容设置为“固定”时，图像不再约束在“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>

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

---

我该如何实现这一点呢？

在稍微弄乱它之后，我认为最好的方法是从引导列中删除fixed div，并将其放在dom的更高位置，或者至少在行之外。有很多的负边际和奇怪的填充物在让BS cols正常工作，它正在推动你的固定div。如果是我，这将是网站的一个主要功能，我会制作一个100%宽度的div，abs pos，左上右下都是0，然后将固定div放在其中。对于固定pos div，您希望它位于相对pos父级中，在您的情况下，right设置为0，top设置为150。如果父窗口的宽度为窗口宽度的100%，那么您可以使用px或%。

解决问题 忽略图像一秒钟

.img responsive

只会使图像占据父容器中100%的可用空间

然后问题变成了，我是否可以将

位置：fixed

添加到div中，并使其与具有

.col-xs-3

（

宽度：25%

）的父级具有相同的宽度？一旦我们解决了这个问题，图像应该是一致的

您可能已经知道：

对于固定位置的长方体，包含块由视口建立

意思是固定始终相对于父窗口，而不是元素。 简单解 如果视口与父div的宽度相同，则可以简单地解决此问题：

HTML：

C
导航栏

Relative

-div占据父级宽度的100%（

.col-xs-3

）：

#导航栏{
背景：黄色；
位置：相对位置；
}

已修复

-div占据屏幕的100%-应用

。col-xs-3

宽度：

#导航栏{
背景：黄色；
位置：固定；
宽度：25%；
}

更好的解决方案 但是，该解决方案对我们帮助不大，因为该类在不同的断点处对行应用了可变宽度。这会导致25%的父div和25%的视口不同步

那么我们怎样才能让他们再次同步呢？ 要回答这个问题，让我们仔细看看：

.container{
@介质（最小宽度：@screen sm min）{
宽度：@容器sm；
}
@介质（最小宽度：@screen-md-min）{
宽度：@集装箱md；
}
@介质（最小宽度：@屏幕最小长度）{
宽度：@集装箱lg；
}
}

因此，我们现在必须模拟.container应用的宽度，而不是简单地应用

25%

width。以下是方法：

下面是一些示例标记：

内容
宽度：px

现在，我们可以使用以下CSS在所有断点处应用宽度：

#侧边栏{
背景：黄色；
位置：固定；
宽度：25%；
}
@介质（最小宽度：768px）{
#边栏{
宽度：158px；/*632*.25*/
}
}
@介质（最小宽度：992px）{
#边栏{
宽度：213px；/*852*.25*/
}
}
@介质（最小宽度：1200px）{
#边栏{
宽度：263px；/*1052*.25*/
}
} 

下面是使用相对位置与固定位置与样式的并排比较：

回到我们手头的问题： 只需将上面的演示添加回我们的响应图像：

---

---

请注意：大多数网站在使用

位置：fixed

时选择使用固定宽度的侧导航栏，以避免此类问题。

感谢Kyle在顶部介绍的惊人解决方案。 以下是正常容器（非流体）中8/4情况的解决方案

---

不幸的是，该站点是完全响应的，并且依赖于

.container

元素，删除它不是一个选项。我倾向于根据容器断点设置固定宽度，但我希望有一个更简单的方法。@Bill，我支持你，伙计！更新答案与解决方案！

.fixed {
    position: fixed;
    top: 150px;
}

<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>

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