将响应图像添加到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%）相同的宽度吗？一旦我们解决了这个问题，图像应该排成一行。

您可能已经了解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%;
}

Demo in Fiddle

更好的解决方案

但是，该解决方案对我们没什么帮助，因为.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 */
  }
} 

这里使用相对与固定位置和样式进行并排比较：

Demo in Fiddle

回到我们手边的问题：

只需从上方获取演示并添加回我们的响应式图像：

Solution Demo in Fiddle

---

作为备注：大多数网站在使用position:fixed时选择使用固定宽度的侧边栏，以避开这些问题。

Answer 2

稍微弄清楚它后，我认为最好的方法是从引导列中删除固定div，并将其放在dom中，或者至少在行外部。有很多负余量和奇怪的填充内容，以使BS cols正常工作，它正在推动你的固定div。如果它是我，这将成为网站上的一个主要功能，我将制作一个宽度为100％的div，abs pos，左上角的右下角全部为0，然后将固定的div放在其中。对于固定的pos div，您希望它居住在相对pos父级中，右侧设置为0，顶部设置为150。如果父级是窗口宽度的100％，那么您可以使用px或％很好地控制它的位置。

Answer 3

感谢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; 
  }
}