去除左右两边的空白

Question

我有一个使用bootstrap's grid system 创建的引导程序panel-based 网页。问题是，我在 div 的左侧和右侧有那些额外的空间。基本上内容都在中心。如何删除它？

我尝试使用 margin-top、margin-left、margin-right、bootstrap 的 pull-left 和 pull-right、margin 和 padding 设置为 0、width:100% 等都没有用。

这是一张图片：

看看左右两边，这是我要删除的空白。我不知道这是我的 CSS 有问题还是我对框架的使用不当（我是新手）或者我不知道的一些引导程序的标准行为。但我想知道这是什么，并且知道如何删除它。

这是我的 HTML（这是上面图片的完整 HTML，当然除了母版页的 HTML）：

 <div class="row">
            <div class="col-md-6">
                <br />
                    <div class="panel panel-primary">
                       <div class="panel-heading">
                          <h3 class = "panel-title">JUST HAPPEND, YOU KNOW</h3>
                       </div>

                       <div class="panel-body">
                           <p />
                          <span class="date">15.40</span> CONTENTS GOES HERE... <p />
                          <span class="date">15.40</span> CONTENTS GOES HERE... <p />
                          <span class="date">15.40</span> CONTENTS GOES HERE... <p />
                          <span class="date">15.40</span> CONTENTS GOES HERE... <p />
                          <input class='btn btn-success' type='submit' value="LET ME READ ALL THAT" title="READ MORE...">
                       </div>
                   </div>
            </div>

            <div class="col-md-6">
                 <div class = "panel panel-primary">
                       <div class = "panel-heading">
                          <h3 class = "panel-title">LAST NEWS</h3>
                       </div>
                       <div class = "panel-body">
                           <p />
                           MORE CONTENTS GOES HERE
                       </div>
                   </div>
            </div>

            <div class="col-md-6">
                <div class = "panel panel-primary">
                       <div class = "panel-heading">
                          <h3 class = "panel-title">VIDEOS</h3>
                       </div>
                       <div class = "panel-body">
                         <div class="vid">
                          <iframe width="420" height="315"
                              src="https://www.youtube.com/embed/yWP6Qki8mWc?cc_load_policy=1"
                              frameborder="0" allowfullscreen=""
                           ></iframe>
                             </div>
                       </div>
                   </div>
             </div>

            <div class="col-md-6">
               <div class="panel panel-primary">
                       <div class = "panel-heading">
                          <h3 class = "panel-title">MAY I HELP YOU?</h3>
                       </div>
                       <div class = "panel-body">
                            HELLO
                       </div>
                    </div>
             </div>

          <div class="col-md-8">
                 <div class="panel panel-primary">
                       <div class = "panel-heading">
                          <h3 class="panel-title">THE LIFE</h3>
                       </div>
                       <div class = "panel-body">
                            <div class="row">
                                <div id="links">
                                        <div class="col-md-4">
                                            <a href="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" title="Image 1" data-gallery>
                                                <img src="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg"  alt="Image 1" class="img-responsive">
                                            </a>
                                        </div>

                                        <div class="col-md-4">
                                            <a href="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg"  title="Image 2" data-gallery>
                                                <img src="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" alt="Image 2" class="img-responsive">
                                            </a>
                                        </div>

                                        <div class="col-md-4">
                                            <a href="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg"  title="Image 3" data-gallery>
                                                <img src="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" alt="Image 3" class="img-responsive">
                                            </a>
                                        </div>
                                </div>
                        </div>
                       </div>
                   </div>
            </div>
        <br /> <br />
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    AAAAAAA
                </div>
                <div class="col-md-4">
                    BBBBBBB
                </div>
                <div class="col-md-4">
                    CCCCCCC
                </div>
            </div>
        </div>
     </div>

Answer 1

我假设您正在尝试使页面全宽，而不是 1170px 宽和居中，这是 .container 引导类所做的。如果是这种情况，您只需将.container 替换为.container-fluid：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            foo, bar, foobar 
        </div>
    </div>
</div>

由于我在您的摘录中没有看到任何 .container 声明，因此更改应该发生在您的母版页中。另请记住，每个 .row 的列数应始终为 12（2 x .col-md-6、3 x .col-md-4 等）。

CodePen

Answer 2

我发现了问题：在引导程序中有一个规则

.container {
   width: 1170px;
}

这会导致出现白色间隙。要删除它，只需在 site.css 中添加 width:100% 到 body-content

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
   padding-left: 15px;
   padding-right: 15px;
   width:100%; //ADD THIS
}

这是证明：codepen