html - 去除左右两侧的白色间隙

Question

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

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

这是一张图片:

查看左侧和右侧，这是我要删除的空白区域。我不知道这是我的 CSS 有问题还是我对框架的错误使用(我是新手)或者我不知道的一些 Bootstrap 的标准行为。但我想知道这是什么并知道如何删除它。

这是我的 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 Bootstrap 类所做的.如果是这种情况，您需要做的就是将 .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