Question

Hey StackOverFlow社区，

我需要让这些图像在一起。它们最终会变得更大，触及浏览器的边缘。这些将是导致电影工作的例子，目前有占位符图像。

我已经尝试过尝试让这些图像触及，但我不知道发生了什么......将边距和填充设置为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

填充不在行上，而是在cols上。而且它不是保证金，所以你.nogut将无法工作:)

你有几乎正确的答案，试试这个：

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

然后在你的html：

<div class="row no-gutter">

Answer 2

首先，右键单击浏览器并使用inspect（我认为它最好是chrome。）点击此图标。将鼠标悬停在图片上，您就可以看到差距所属的元素。单击样式部分中的元素时，可以取消（并添加）不同的css属性，看看会发生什么。非常强大的工具。

对于你，我还建议添加填充：0px;到.nogot并将该类添加到第二行。

需要图像一起触摸，没有天沟

2 个答案: