html - Bootstrap 词缀打破元素宽度

Question

我制作了一个带有菜单的基本侧边栏和一个带有内容的区域。将它们分别分成 3 列和 9 列。在我将 .affix 类应用于侧边栏以使其具有粘性之前，它看起来很好。现在侧边栏获取父级的宽度以从其他地方计算自身宽度，而不是从 .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;
}