Bootstrap网格列划分不起作用

Question

我刚刚开始使用 Bootstrap，但在使用 Grid Col 系统时遇到了如下问题。

我想将徽标和导航栏置于页面中心，因此我将网格布局划分为 4 col-lg-4 (md-4)，然后将图像和导航栏添加到第二个 DIV col-lg -4（请看代码）但是当点击预览时，标志和导航向左偏离了一点（但可见）。

谁能帮我解决它，拜托。提前致谢。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4"></div>
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img id="logo" src="PlayStation_1_Logo.png">
        </div>
        <div class="col-lg-4 col-md-4"></div>
    </div>
</div>
<!--main navbar-->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container">   
        <div class="row">
            <div class="col-lg-2 col-md-2"></div>  
            <div class="collapse navbar-collapse navbar-menubuilder col-lg-8 col-md-8">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index">Index</a>
                    </li>
                    <li>
                        <a href="service">Service</a>
                    </li>
                    <li>
                        <a href="/about-us">About-us</a>
                    </li>
                    <li>
                        <a href="/news">News</a>
                    </li>
                    </li>
                    <li>
                        <a href="/contact">Contact</a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-2 col-md-2"></div>
         </div>       
    </div>
</div>

Answer 1

使用以下代码更改您的代码：

<div class="container-fluid">
<div class="row text-center">  
        <img id="logo" src="PlayStation_1_Logo.png">
</div>
<!--main navbar-->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container">          
                <div class="collapse navbar-collapse navbar-menubuilder ">
                    <ul class="nav navbar-nav">
                        <li><a href="index">Index</a>
                        </li>
                        <li><a href="service">Service</a>
                        </li>
                        <li><a href="/about-us">About-us</a>
                        </li>
                        <li><a href="/news">News</a>
                        </li>
                        </li>
                        <li><a href="/contact">Contact</a>
                        </li>
                    </ul>
                </div>   
    </div>
</div>

也应用 css 如下：

<style>
        .navbar .navbar-nav {
            display: inline-block;
            float: none;
        }        
        .navbar .navbar-collapse {
            text-align: center;
        }
</style>