Links inside Bootstrap list-group not working
<p>Here is my code. As you can see is a list-group of anchors that redirect to different sections (here changed to Twitter address in order to test the code) and a final dropdown menu with internal links too. You can <a href="http://www.bootply.com/rmhLUMvGhS" rel="nofollow">check it in bootply</a> too. And as you can see, the links are not working. Even if I take out the dropdown menu, it still doesn't work. It does nothing, and I am clueless about why.  </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;style&gt;
  .list-group.panel &gt; .list-group-item {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
  }
  .list-group-submenu {
    margin-left:20px;
  }
&lt;/style&gt;
&lt;div class="list-group"&gt;
  &lt;a href="http://twitter.com" class="list-group-item list-group-item-action disabled" id="10_2016" target="_blank"&gt;
    October 2016
    &lt;span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news"&gt;0&lt;/span&gt;
    &lt;span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news"&gt;0&lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="http://twitter.com" class="list-group-item list-group-item-action" id="9_2016" target="_blank"&gt;
    September 2016
    &lt;span class="badge" data-toggle="tooltip" data-container="body" data-original-title="Active news"&gt;2&lt;/span&gt;
    &lt;span class="badge badge-gray pull-right" data-toggle="tooltip" data-container="body" data-original-title="Inactive news"&gt;0&lt;/span&gt;
  &lt;/a&gt;
  &lt;!-- Here go more months --&gt;
  &lt;a aria-expanded="true" href="#SubMenu1" class="list-group-item active" data-toggle="collapse" data-parent="#SubMenu1"&gt;
    Historic &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
    &lt;span class="badge"&gt;1&lt;/span&gt;
  &lt;/a&gt;
  &lt;div aria-expanded="true" style="" class="list-group-submenu collapse in" id="SubMenu1"&gt;
    &lt;a href="http://twitter.com" class="list-group-item active" data-parent="#SubMenu1" target="_blank"&gt;
      2015
      &lt;span class="badge"&gt;1&lt;/span&gt;
    &lt;/a&gt;
    &lt;!-- Here go more years --&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As @MoshFeu and @almostabeginner have proved in the comments, the code works, but it doesn't work in my project. Here I add a few more details about the environment of this code and what I've tried:
The project is PHP, the html is prepared in a function in a class and echoed inside a column and row in bootstrap. I have changed the internal URL in href by the twitter URL to be sure the path was not bad. I have very little js going on on that page. In the console I can't see any malformed html or js errors. There is some specific styles for that page, but the only styles about links are about their colour. So I don't know what else could I try.</p>