Bootstrap 导航栏在包含 width:100% 后在 wordpress 中离开页面

Question

Bootstrap 在 .container div 上包含 width:100% 后，导航栏在 wordpress 中离开页面。页眉和页脚已经是全角了。

我将页面模板包裹在我需要的全宽容器中。

现在当我添加

.container{
  width:100% !important;
}

或

<div class="container" style="width:100% !important">

模板页面变为全宽，但导航栏也跨页了一点。（注意：none 的导航栏元素或 classes 用容器 class 包装）。尝试了很多东西，但似乎没有任何效果。这是快照 navbar spans off-page to the right

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-inner">
        <!-- 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-example-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>
            <a class="navbar-brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <?php wp_list_pages(array('title_li' => '')); ?>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.navbar-inner -->
</nav>

 <div class="container-fluid">
 <section class="no-padding" id="portfolio">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <a href="#" class="portfolio-box">
                    <img src="http://i341.photobucket.com/albums/o377/tynillle/lights.jpg" class="img-responsive" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Category
                            </div>
                            <div class="project-name">
                                Project Name
                            </div>
                        </div>
                    </div>
                </a>
            </div>            

        </div>
    </div>
</section>
</div>

Answer 1

使用 container-fluid class 而不是更改 .container 样式..

<div class="container-fluid"> Your content... </div>

而不是

<div class="container"> Your content... </div>

有帮助吗？

更新

如果出于某种原因您仍想编辑容器 class 的样式，那么您应该将此样式添加到您的 css:

.container {
          position: absolute;
          width: 100%;
          left: 0;
}

更新

这是你的 html:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
    <!-- 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-example-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>
        <a class="navbar-brand" href="<?php echo site_url(); ?>"><?php bloginfo('name'); ?></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <?php wp_list_pages(array('title_li' => '')); ?>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.navbar-inner -->
</nav>

<section class="no-padding" id="portfolio">
<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <a href="#" class="portfolio-box">
                <img src="http://i341.photobucket.com/albums/o377/tynillle/lights.jpg" class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-category text-faded">
                            Category
                       </div>
                         <div class="project-name">
                            Project Name
                        </div>
                    </div>
                </div>
            </a>
        </div>            

    </div>
</div>

这就是你 css:

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: -15px;
    margin-left: -15px;
    position: absolute;
    width: 100%;
}

Bootstrap 导航栏在包含 width:100% 后在 wordpress 中离开页面

Bootstrap navbar goes off-page in wordpress after including width:100%

wordpress

navbar

twitter-bootstrap