删除左右两侧的白色间隙空间

Question

我有一个使用bootstrap的网格系统制作的基于面板的网页。问题是，我有那些额外的空格在divs的左侧和右侧。基本上内容都在中心。我怎么移除这个？

我试着使用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

我发现了问题：在bootstrap中有一个规则

.container {
   width: 1170px;
}

这就造成了白色的空隙。要删除它，只需将width：100%添加到site.css中的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
}

这就是证明：代码本

Answer 2

我假设您试图使页面全宽，而不是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等）。

码本