Bootstrap 词缀打破元素宽度

Question

我制作了一个带有菜单的基本侧边栏和一个带有内容的区域。将它们分别分成 3 列和 9 列。它看起来很好，直到我将 .affix class 应用到侧边栏以使其具有粘性。现在侧边栏获取父级的宽度以从其他人计算自身宽度，而不是从 .row 或 .container，并且变得比它必须的更大。

我应该怎么做才能使侧边栏 25%又宽又粘？为什么会变大？谢谢！

jsfiddle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-sm-3 left affix">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
    <div class="col-sm-offset-3 col-sm-9 right">
      Some content
    </div>
  </div>
</div>

Answer 1

您必须声明附加元素的宽度。

.left {
  border: 2px solid green;
 width:15% !important;
}

Bootstrap 词缀打破元素宽度

Bootstrap affix breaks element width

html

css

twitter-bootstrap

affix