Question

我正在尝试使某些div内容变得粘滞，但内容拒绝被约束到父div，因为它已修复。

我想知道我是否可以使用任何CSS技巧，而不必在width上设置.sticky-block。最糟糕的情况是，我可以根据Bootstrap断点设置不同的widths。但我宁愿修复div以某种方式使用Bootstrap的列。

http://output.jsbin.com/savoza

HTML：

  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="sticky-block">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quod deleniti voluptatibus quaerat eaque aspernatur fuga, quo perspiciatis ab, neque eveniet adipisci id sunt facere animi alias nihil pariatur suscipit!</p>
        </div>
      </div>
      <div class="col-sm-6">
        [...lots of content...]
      </div>
    </div>
  </div>

CSS：

.sticky-block {
  position: fixed;
}

Answer 1

将col-sm-6添加到粘性块。

<div class="container">
    <div class="row">
      <div class="col-sm-6">
        <div class="sticky-block col-sm-6">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, quod deleniti voluptatibus quaerat eaque aspernatur fuga, quo perspiciatis ab, neque eveniet adipisci id sunt facere animi alias nihil pariatur suscipit!</p>
        </div>
      </div>
      <div class="col-sm-6">
        [...lots of content...]
      </div>
    </div>
</div>

然后添加最大宽度，以便在页面大于容器时不会溢出。

.sticky-block.col-sm-6 {
    max-width: 585px;
}

然后只需在768px CSS断点上的[lots of content] div顶部添加一些填充。

Answer 2

固定容器将从父值继承宽度。

.sticky-block {
    width: inherit; 
    max-width: 585px;
    position: fixed;
}

我添加了像jonathan这样的最大宽度，它给出了相同的结果。

Bootstrap - 当内容设置位置时DIV溢出：固定

2 个答案: