Question

出于某种原因，我的页脚导航栏在完整桌面模式下显示时，一些菜单链接显示在与导航栏标题相同的行上，然后在经过导航栏标题时垂直居中...我只是想要它们在一条线上垂直显示并且中心....

(currently displayed)
Navbar Header Link 1
     Link 2
     Link 3

(How I actually want it displayed)
Navbar Header 
     Link 1
     Link 2
     Link 3

<div class = "container-fixed">
        <div class = "row" height = 100%>
            <div class = "col-sm-2 col-sm-offset-1">
                <!-- Footer About Dropdown -->
                <nav class = "navbar navbar-default" id = "bottomabout">
                    <div class = "container">
                       <div class = "navbar-header">
                            <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
                                <span class = "glyphicon glyphicon-plus"></span>
                            </button>
                            <h3 class = "text-center">
                                About Us
                            </h3>
                        </div>
                        <div class = "collapse navbar-collapse" id = "aboutcollapse">
                            <ul class = "nav nav-pills nav-stacked">
                                <li>
                                    <a href = "">
                                        OUR STORY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        BABY REGISTRY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        STORE LOCATOR
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        TESTIMONIALS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
            <div class = "col-sm-2">
                <!-- Service Footer Dropdown -->
               <nav class = "navbar navbar-default" id = "bottomservice">
                    <div class = "container">
                       <div class = "navbar-header">
                            <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
                                <span class = "glyphicon glyphicon-plus"></span>
                            </button>
                            <h3>
                                Service
                            </h3>
                        </div>
                        <div class = "collapse navbar-collapse" id = "aboutcollapse">
                            <ul class = "nav nav-pills nav-stacked">
                                <li>
                                    <a href = "">
                                        CONTACT US
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        ORDER STATUS
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        FAQ
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        SHIPPING POLICY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        RETURN POLICY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        NEWSLETTER
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        MY ACCOUNT
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        LIVE CHAT
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav> 
            </div>
            <!-- Shop Footer Dropdown -->
            <div class = "col-sm-2">
                <nav class = "navbar navbar-default" id = "bottomshop">
                    <div class = "container">
                       <div class = "navbar-header">
                            <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
                                <span class = "glyphicon glyphicon-plus"></span>
                            </button>
                            <h3>
                                Shop
                            </h3>
                        </div>
                        <div class = "collapse navbar-collapse" id = "aboutcollapse">
                            <ul class = "nav nav-pills nav-stacked">
                                <li>
                                    <a href = "">
                                        BABY APPAREL
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        BABY GIFTS
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                       CHRISTENING
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        FURNITURE
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        BEDDING
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        DECOR
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        LIGHTING
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        SALE
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        BRANDS
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav> 
            </div>
            <!-- Contact Us Footer Dropdown -->
            <div class = "col-sm-2">
               <nav class = "navbar navbar-default" id = "bottomcontact">
                   <div class = "container">
                       <div class = "navbar navbar-header">
                           <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
                                <span class = "glyphicon glyphicon-plus"></span>
                            </button>
                            <h3>
                                Contact Us
                            </h3>
                       </div>
                       <div class = "collapse navbar-collapse">
                           <ul class = "nav nav-pills nav-stacked active">
                               <li>
                                   <h6>
                                      <b>
                                        BEAUTIFUL BEGINNINGS
                                      </b> 
                                   </h6>
                               </li>
                           </ul>
                       </div>
                   </div>
               </nav>
            </div>
            <div class = "col-sm-2">
                <h3>
                    Follow Us
                </h3>
                <button type="button" class="btn btn-fb"><i class="fa fa-facebook"></i></button>
            </div>
        </div>
    </div>

Answer 1

如果您取出容器，它将按您的意愿工作。检查以下内容：

            <nav class = "navbar navbar-default" id = "bottomabout">
                   <div class = "navbar-header">
                            <button class = "navbar-toggle" data-toggle = "collapse" data-target = "#navbar-collapse">
                                <span class = "glyphicon glyphicon-plus"></span>
                            </button>
                            <h3 class = "text-center">
                                About Us
                            </h3>
                        </li>
                        <li class = "collapse navbar-collapse" id = "aboutcollapse">
                            <ul class = "nav nav-pills nav-stacked">
                                <li>
                                    <a href = "">
                                        OUR STORY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        BABY REGISTRY
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        STORE LOCATOR
                                    </a>
                                </li>
                                <li>
                                    <a href = "">
                                        TESTIMONIALS
                                    </a>
                                </li>
                            </ul>
                        </div>

                </nav>

Bootstrap页脚导航栏问题

1 个答案: