Bootstrap网格列划分剂量不起作用

debugcn 发表于 Dev

瑞安

我刚刚开始使用Bootstrap，但是在使用如下所示的Grid Col System时遇到了麻烦。

我想将徽标和导航栏居中在页面中心，因此我将网格布局划分为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>

博士奇怪的

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。