html - 需要图像接触在一起，没有装订线

Question

嘿 StackOverFlow 社区，

我需要将这些图像联系在一起。它们最终会变得更大并触及浏览器的边缘。这些将是通向电影作品示例的图 block ，目前有占位符图像。

我已经尝试并尝试让这些图像相互接触，但我不确定发生了什么...将边距和填充设置为 0。

这是代码。

HTML

<section id="video-section" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Video Production</h2>
                <hr class="small">
            </div>
            <div class="container-fluid full-width has-inner"> 
                <div class="row row-no-gutter">
                    <div class="col-md-4 nogut">
                        <div id="image1" class="video-item">
                            <a href="https://vimeo.com/208403633">
                                <img id="portfolio1" class="img-full-width" src="img/image1.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image2" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image2.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 nogut">
                        <div id="image3" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image3.jpg">
                            </a>
                        </div>
                    </div>
                </div> 
                <div class="row row-no-gutter">
                    <div class="col-md-4">
                        <div id="image4" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image4.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id="image5" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image5.jpg">
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div id ="image6" class="video-item">
                            <a href="#">
                                <img class="img-full-width" src="img/image6.jpg">
                            </a>
                        </div>
                    </div>

                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

CSS

#video-section {
padding: 10px;
  background: #353030;
  color: white;
}

.containter-fluid .full-width {
  padding-left: 0px;
  padding-right: 0px;
  overflow-x: hidden;
}

.row .row-no-gutter {
  margin: 0px;
  padding: 0px;
}

.nogut {
  margin: 0px;
}

.img-full-width {
  width: 100.5%;
  height: auto;
}

我花了几个小时试图解决这个问题，我做错了什么？

Answer 1

填充不在行上，而是在列上。而且它不是 margin ，所以你 .nogut 不会工作:)

你的答案几乎是正确的，试试这个:

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

然后在你的 html 中:

<div class="row no-gutter">