按钮在Bootstrap中向右折叠

Question

我试图实现一个可以向右折叠的导航栏。我见过一些水平倒塌的例子，但这不是我想要的。下面我附上了一个基本的模拟。任何想法将不胜感激。

Answer 1

通过您的示例图片，看起来您可能会将这些放置在页面的某处而不是页面的顶部。

所以可能是如果你考虑使用popover。将导航按钮放在你喜欢的地方，并让弹出窗口出现在你需要的地方。

看看this example in Bootstrap here。

这有帮助吗？

Answer 2

我用酥料饼作为AngularJR说Check this Demo

HTML部分

<button class="popper" data-toggle="popover">Pop me</button> 
<div class="popper-content hide"><nav class="nav"> 
    <ul> 

     <li> 
      <a href="#">Nav Item</a> 
      <ul> 
       <li><a href="#">Subnav Item</a></li> 
       <li><a href="#">Subnav Item</a></li> 
       <li><a href="#">Subnav Item</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav></div> 

jQuery的部分

$('.popper').popover({ 
    placement: 'right', 
    container: 'body', 
    html: true, 
    content: function() { 
     return $(this).next('.popper-content').html(); 
    } 
});