Question

我无法使用自举网格系统将自定义导航与页面中心对齐，并在更改屏幕尺寸时保持一致。

任何人都可以告诉我使用Bootstrap 3网格系统将这些盒装<div>对齐到每个屏幕（手机，平板电脑，桌面）的中心的正确方法。

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并为display: inline-block提供.nav-box

以下是工作小提琴：https://jsfiddle.net/MasoomS/kc830h4j/1/

Answer 2

听起来你只需要将文本居中。列居中。尝试添加text-center而不是center-block。

这是一个JSFiddle： https://jsfiddle.net/0184v2h9/

            <div class="row">
                <nav role="navigation">
                    <!-- Button Left -->
                    <div class="col-lg-10 col-lg-offset-1">
                        <div class="text-center">
                            <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>

您可以使用其他类操作网格系统，例如您可以使用＆＃34; col-lg-12 col-sm-6＆＃34;这将使它在大屏幕上成为12宽度的列，在小屏幕上成为6宽度。

希望有所帮助！

Answer 3

＆＃13;

.new_apply{
     text-align: center;
    margin: auto;
    position: relative;
    top: 0;
    right: 0;
    display: block;
    left: 0;   
}

＆＃13;

<div class="row new_apply">
                        <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>

＆＃13;

这是JSfidle

DEmo jsfiddle

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

3 个答案: