Question

我试图使用中心块来中心我的WordPress模板的导航，这是使用bootstrap。我尝试将center-block类应用于这些类名中的每一个而没有运气，导航项（li菜单项）仍然向左拉。我还尝试添加自己的自定义类，以便在我自己的center-block文件中复制custom.css而没有运气。

那么究竟应该放置中心区块还是任何其他中心代码？我已经通过并检查了每个元素，试图弄清楚哪些元素并没有完全居中，但我仍然不能把手指放在它上面。

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
    <div class="container">
        <div class="row">
            <nav class="container primary">
                <div class="col-sm-12 primary responsiveSelectContainer">
                    <ul id="menu-primary-navigation-1" class="menu responsiveSelectFullMenu">
                        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2002"><a href="http://localhost/wordpress/">Home</a></li>
            </nav>
        </div>
    </div><!-- .container -->
</nav>

原始的php和html代码：

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
    <div class="container">
        <div class="row">
            <nav class="container primary">
                <?php wp_nav_menu(  
                    array(  
                        'menu'              => 'Primary Navigation',
                        'container'         => 'div',
                        'container_class'   => 'col-sm-12 primary'  
                        )  
                ); ?> 
            </nav>
        </div>
    </div><!-- .container -->
</nav><!-- .site-navigation -->

Answer 1

试试这个：

<nav class="navbar navbar-default container primary">

我没有看到你在哪里使用一些内置的默认导航栏标签，这可能是它没有居中的原因。希望这会有所帮助。

Answer 2

试试这个......

<div class="container">
    <div class="row">
      <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
    </div>
</div>

Bootstrap中心块无法正常工作

2 个答案: