Question

我刚刚开始使用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>

Answer 1

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

也适用于css，如下所示：

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

Bootstrap网格列划分不起作用

1 个答案: