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

时间:2014-05-12 19:03:03

标签: html css twitter-bootstrap

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

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

我将如何完成这项工作?

3 个答案:

答案 0 :(得分:7)

问题

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

然后问题就变成了,我可以将position: fixed添加到div并仍然占用与其父.col-xs-3width: 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

screenshot fixed vs relative

更好的解决方案

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

screenshot container

回到我们手边的问题:

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

Solution Demo in Fiddle


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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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