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

Adding a responsive image to a position fixed div within a Bootstrap column

提问by Bill

I have a two column layout, one column is the document content and the other is the navigation. I've set this up using a Bootstrap row, one column is 8 units wide and the other is 3 units wide with an offset of 1 unit. I've set the navigation content to fixed so that it stays on the page.

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

On some of the pages I want to have an image at the top of the navigation column. I want this image to be responsive and stay within the 3 unit column and be fixed along with the navigation. However, when you set the content to fixed the image is no longer constrained within the 3 unit column.

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

I've set up a jsfiddle of the problem at http://jsfiddle.net/yKUZW/3/.

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

Here is the example html:

这是示例 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>

And the relevant css:

以及相关的css：

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

Notice that when the page is resized horizontally the image stretches outside of the light grey container area. What I want is for the right hand side of the image to always align exactly with the right hand edge of the container, resizing the image as needed.

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

How would I go about accomplishing this?

我将如何去完成这个？

回答by KyleMit

The Problem

问题

Ignore the image for a second... .img-responsivejust makes the image take up 100% of the available space in the parent container.

暂时忽略图像....img-responsive只是使图像占用父容器中可用空间的 100%。

Then the question becomes, can I add position: fixedto a div and still have it take up the same width as it's parent which has .col-xs-3(width: 25%)? Once we resolve that, the image should fall into line.

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

As you may already know about fixed positioning:

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

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

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

Meaning Fixed is always relative to the parent window, never an element.

含义 Fixed 总是相对于父窗口，而不是一个元素。

Simple Solution

简单的解决方案

If the viewport is the same width as the parent div, this can be resolved trivially:

如果视口与父 div 的宽度相同，则可以轻松解决此问题：

HTML:

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 takes up 100% of width of parent (.col-xs-3):

Relative- div 占据父 ( .col-xs-3)宽度的 100% ：

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

Fixed- div takes up 100% of screen - apply .col-xs-3width ourselves:

Fixed- div 占据屏幕的 100% -.col-xs-3自己应用宽度：

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

Demo in Fiddle

小提琴演示

Better Solution

更好的解决方案

However, that solution isn't much help to us because the the .containerclass applies variable widths at different breakpoints to the row. This causes 25% of the parent div and 25% of the viewport to get out of sync.

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

So how can we get them to sync up again?

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

To answer that, let's look at exactly what .container is doing:

为了回答这个问题，让我们看看.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;
    }
}

So instead of trivially being able to apply a 25%width, we now have to mimic the width applied by .container. Here's how:

因此，不是简单地能够应用25%宽度，我们现在必须模仿 .container 应用的宽度。就是这样：

Here's some sample markup:

这是一些示例标记：

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

Now we can apply a width at all breakpoints with the following CSS:

现在我们可以使用以下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 */
  }
} 

Here's a side by side comparison of using relative vs fixed position with styling:

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

Demo in Fiddle

小提琴演示

Back to our problem at hand:

回到我们手头的问题：

Just take the demo from above and add back in our responsive image:

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

Solution Demo in Fiddle

Fiddle 中的解决方案演示

---

---

As a note: most sites opt to use a fixed width side navbar when using position:fixedin order to sidestep these kinds of issues.

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

回答by user3618095

After messing with it a bit I believe the best way would be to remove the the fixed div from the bootstrap column, and place it higher up in the dom, or at least outside of the row. There is a lot of negative margin and strange padding stuff going on to get the BS cols to work properly and it is pushing your fixed div around. If it were me and this was going to be a main feature on the site I would make a div with width 100%, abs pos, top left right bottom all at 0, and then place the fixed div inside of that. For a fixed pos div you want it to live in a relative pos parent with right set to 0 and top set to 150 in your case. If the parent is 100% of the windows width then you have pretty good control over where it goes using either px or %.

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

回答by Ricardo Contente

Thanks Kyle for the amazing solution you described at the top. Here is a solution for 8/4 situation in a normal container (not fluid)

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

and here the css

这里是 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; 
  }
}