Question

在包含宽度：100％on .container div之后，Bootstrap导航栏在wordpress中离页。页眉和页脚已经是全角。

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

现在我添加

.container{
  width:100% !important;
}

或

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

模板页面变为全宽，但导航栏也会偏离页面。（注意：没有任何navbar元素或类用容器类包装）。试了很多东西但似乎没什么用。这是一个快照 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类而不是更改.container样式..

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

而不是

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

这有帮助吗？

<强>更新

如果出于某种原因你还想编辑容器类的样式，那么你应该将这个样式添加到你的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导航栏在wordpress中离页：100％

1 个答案: