将Bootstrap导航栏从水平更改为垂直

Question

这是我的横向导航栏代码：

<!-- Header -->
<header id="header" class="navbar navbar-default navbar-static-top" > 
    <div class="clearfix">
        <!-- logo -->      
        <div class="hd-logo">
            <a href="index.html"><img src="img/logo.png" title="" alt=""></a>
        </div>     
        <!-- /logo -->
        <!-- responsive menu -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Navigation Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- /responsive menu -->    
        <!-- menu -->
        <nav class="hd-nav nav navbar-nav navbar-right navbar-collapse collapse">
            <ul class="nav navbar-nav hd-list-menu clearfix  pull-left">
                <li>
                    <a href="about.html">
                        <span class="link-title">About</span>
                        <span class="link-subtitle">our history</span>
                    </a>
                </li>
                <li>
                    <a href="gallery.html">
                        <span class="link-title">Gallery</span>
                        <span class="link-subtitle">Our pictures</span>
                    </a>
                </li>           
                <li>
                    <a href="ceremony.html">
                        <span class="link-title">Ceremony</span>
                        <span class="link-subtitle">All information</span>
                    </a>
                </li>
                <li>
                    <a href="rsvp.html">
                        <span class="link-title">RSVP</span>
                        <span class="link-subtitle">Events Attending</span>
                    </a>
                </li>
                <li>
                    <a href="archive-blog.html">
                        <span class="link-title">Blog</span>
                        <span class="link-subtitle">All the news!</span>
                    </a>
                </li>
                <li>
                    <a href="page-registry.html">
                        <span class="link-title">Registry</span>
                        <span class="link-subtitle">Our Gift List</span>
                    </a>
                </li>
            </ul> 
        </nav>
        <!-- /menu -->
    </div>
</header>
<!-- /header -->

如何垂直转换它。它应显示在左下角。 我试过拉左和堆叠属性，但它没有工作。 即使你有另一个bootstrap左堆叠垂直菜单让我知道。