去除左侧和右侧的白色间隙空间-Java 学习之路

我有一个使用bootstrap's grid system制作的bootstrap的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">
                

                    <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>
        
 

        <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>

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

回复于 2024-05-19T14:21:03+08:00

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
回复于 2024-05-19T14:21:03+08:00

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

2 回答

相关问题