Question

我的网站有问题：

http://avocat2.dac-proiect.ro/?page_id=17

菜单不是顺便说一句......如果你在首页上显示它应该显示。

这是我的代码：

    <header id="masthead" class="navbar navbar-default" role="banner" style="
    background: transparent;
">

<div class="container-fluid">


<?php if (is_home() || is_front_page()) { ?> <!-- PLACE THIS LINE ABOVE YOUR HEADER -->

  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12" style="font-size:17px;">
      <img src="wp-content/themes/WordPressBootstrap-master/images/DESPRE-NOI.png" class="img-responsive center-block">
    </div>

  </div>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12" style="background-color:lavender;font-size:17px;display:none;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

  </div>
</div>

<?php } ?> <!-- PLACE THIS CODE AFTER THE HEADER -->
    <div class="container" style="
    background: white;
    width: 100%;
    padding-top: 30px;
    margin-top: 0px;
">
        <nav class="" role="navigation">
<!--            <div class="container-fluid">-->
                <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>




            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">

                <!--            <form class="navbar-form navbar-left" role="search">-->
                <!--                <div class="form-group">-->
                <!--                    <input type="text" class="form-control" placeholder="Search">-->
                <!--                </div>-->
                <!--                <button type="submit" class="btn btn-default">Submit</button>-->
                <!--            </form>-->

                <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'zdwpbs' ); ?></a>
                <?php
                wp_nav_menu( array( 'theme_location' => 'primary' ,
                                    'menu_class' => 'nav-menu') );
                ?>
            </div><!-- /.navbar-collapse -->
<!--            </div>-->
    <!-- /.container-fluid -->
        </nav>
    </div><!-- .container -->
</header>

我不明白为什么直到最后......你能帮我解决这个问题吗？

提前致谢！

Answer 1

这是因为您已将菜单放在.container-fluid div（在家中以外的页面中），其左侧和右侧的填充为15px。在主页菜单中是容器 - 流体div之外。这就是为什么它100％。

您可以在.container-fluid div之外移动菜单，也可以将padding:0px;添加到.container-fluid div

<div class="container-fluid no-padding">
//contents
</div>

.no-padding{padding:0px;}

100％bootstrap容器宽度

1 个答案: