Bootstrap: sidenav with affix - links do not wrap to next line

If I have the following, the link text wraps to the next line beautifuly:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" >
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

However, if I add affix, the text stays on the same line and overlaps onto the main content column:

<div class="sidenav" id="site-navbar">
<ul class="nav nav-pills nav-stacked" data-spy="affix">
      <li><a href="#h0">A very very very very very very very very very long thing</a></li>

Is there a way to fix this with css? Also, can I do it without editing the current CSS.