css - 将中心自定义导航与 Bootstrap 3 网格系统对齐

Question

我在使用 Bootstrap 网格系统将我的自定义导航与页面中心对齐并在更改屏幕大小时保持一致时遇到问题。

谁能告诉我对齐这些盒装的正确方法 <div>使用 Bootstrap 3 网格系统到每个屏幕宽度(手机、平板电脑、桌面)的中心。

HTML

                    <div class="row">
                        <nav role="navigation">
                            <!-- Button Left -->
                            <div class="col-lg-10 col-lg-offset-1">
                                <div class="center-block">
                                    <div class="nav-box">
                                        <a href="" class="nav"><strong>ABOUT</strong></a>
                                    </div>




                                <!-- Button Center -->

                                    <div class="nav-box">
                                        <a href="" class="nav"><strong>ACHIEVEMENTS</strong></a>
                                    </div>



                                <!-- Button Right -->

                                    <div class="nav-box">
                                        <a href="" class="nav"><strong>CONTACT</strong></a>
                                    </div>  
                                </div>
                            </div>
                        </nav> 
                    </div>

Answer 1

代替 .center-block 用户 .text-center 并为 .nav-box 提供 display: inline-block

下面是工作 fiddle :https://jsfiddle.net/MasoomS/kc830h4j/1/