Question

我正在使用引导程序，并且图像之间有空白，我似乎无法删除

我尝试设置最大宽度，对象适合度并向左浮动，并删除填充

const {
  clients: { clientsList },
} = getState();

<style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: white;
    }
    .top {
        position: absolute;
        top: 0;
    }
    .imageStyle{
        height: 100%;
        width: 100%;

    }
    .c {
        background-color: black;
    }
</style>

Answer 1

好吧，Bootstrap的col-*类具有内置的填充（padding-left: 15px，padding-right: 15px）。您可以通过在px-0 div上分配类col-7 **来删除该填充。

**设置padding-left: 0和padding-right: 0

请参阅此处：https://codepen.io/anon/pen/pBeMLy

是问题的根源还是您有其他想法？

Answer 2

向您的CSS添加*，它将选择DOM中的所有元素，然后通过添加padding来删除padding和margin：0;边距：0 ;，尝试将img标签替换为div标签，然后将背景图像添加到CSS中。

*{
  padding: 0; margin: 0;
}
.image-style{
  background-image: url("https://images.pexels.com/photos/1137745/pexels-photo-1137745.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 50vh;
}
.c{
  background-color: #000;
  height: 50vh;
}

<div class="container-fluid top">
  <div class="row">
    <div class="col-7 image-style">
      <!-- I M A G E -->
    </div>
    <div class="col-5 c">
    </div>           
  </div>
</div>

Answer 3

我在引导程序中使用了no-gutters类

如何在HTML和CSS中删除图像和资源管理器之间的“空白”

3 个答案: