Question

我有一个使用panel-based制作的bootstrap bootstrap's grid system网页。问题是，我在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

我假设你试图让你的页面全宽，而不是<DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="IsEnabled" Value="{Binding RelativeSource={RelativeSource Self},Path=IsNewItem,Mode=OneWay}" /> </Style> </DataGrid.RowStyle>宽和居中，这就是1170px bootstrap类的作用。如果是这种情况，您只需将.container替换为.container-fluid：

.container

由于我在摘录中没有看到任何<div class="container-fluid"> <div class="row"> <div class="col-md-12"> foo, bar, foobar </div> </div> </div>声明，因此更改应该在您的母版页中进行。另请注意，每个.container的列数应始终为12（2 x .row，3 x .col-md-6等。

CodePen

Answer 2

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

.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

去除左侧和右侧的白色间隙空间

2 个答案: