[英]100% bootstrap Container width
我的網站有問題:
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>
我不明白為什么還沒有結束……您能幫我解決這個問題嗎?
提前致謝!
那是因為您已將菜單放置在.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;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.