Search code examples
htmlcsstwitter-bootstrapaffix

Bootstrap affix breaks element width

I made a basic sidebar with menu and an area with content. Split them by 3 and 9 columns respectively. And it looks fine until i apply .affix class to sidebar to make it sticky. Now sidebar gets width of parent to calculate self width from somewere else, but not from .row or .container, and gets bigger than it must.

What should i do to make sidebar 25% width again and be sticky at same time? Why it gets bigger? Thanks!

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

  • You must declare a width for affixed element.

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