0 
        <div id="container">
            <div class="table-responsive bordered fill">

                    <div class="row fill-row">
                            <div class="w-50" id="image_1"></div>                      
                            <div class="w-50" id="image_1"></div>
                    </div>

                    <div class="row fill-row">
                            <div class="w-50" id="image_1"></div>                            
                            <div class="w-50" id="image_1"></div>
                    </div>

            </div>
        </div>

https://jsfiddle.net/4b36yozr/ 如何删除容器右侧的白色竖条，尽管它设置为全宽。我需要有 4 个块覆盖整个屏幕，而右边没有那个空白。

4

4 回答 4

1

将边距设置为 0px 给类fill-row，你会得到它，而右角没有空间。

<!DOCTYPE html>
<html>

<head>
  <title>Efficienza Energia S.p.a.</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    #container {
      width: 100%;
      height: 100%;
      min-height: 100%;
      min-width: 100%;
      display: block;

    }

    html,
    body {
      height: 100%;
      width: 100%;
    }

    .fill {
      min-height: 100%;
      max-width: 100%;
      height: 100%;
      width: 100%;
    }

    .fill-row {
      min-height: 50%;
      max-width: 100%;
      height: 50%;
      width: 100%;
      /*margin-here*/
      margin:0px;
    }

    #image_1 {
      background-image: url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: auto;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="table-responsive bordered fill">

      <div class="row fill-row">
        <div class="w-50" id="image_1">
        </div>
        <div class="w-50" id="image_1">
        </div>
      </div>

      <div class="row fill-row">
        <div class="w-50" id="image_1">
        </div>
        <div class="w-50" id="image_1">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

我在代码中注释了边距必须设置为零的地方。

于 2019-09-18T12:40:05.980 回答
0

从类行/填充行中删除边距样式。

于 2019-09-18T12:40:00.060 回答
0

添加下面的样式应删除右侧的空白

.fill-row {
    margin: 0; 
}

似乎正在发生的事情是 .row 类正在添加以下样式：

margin-right: -15px;
margin-left: -15px;
于 2019-09-18T12:41:09.020 回答
0

只需使用container-fluid和删除列中的填充，也不要忘记将<body>高度和宽度分别设置为100vh和。100%像这样：

<body>
  <div class="full">
    <div class="container-fluid half">
      <div class="row h-100">
        <div class="col-6 nopadding">
          <div id="image_1"></div>
        </div>
        <div class="col-6 nopadding">
          <div id="image_1"></div>
        </div>
      </div>
    </div>
    <div class="container-fluid half">
      <div class="row h-100">
        <div class="col-6 nopadding">
          <div id="image_1"></div>
        </div>
        <div class="col-6 nopadding">
          <div id="image_1"></div>
        </div>
      </div>
    </div>
  </div>  
</body>

和CSS：

body {
  width: 100%;
  height: 100vh;
}

.full {
  height: 100%;
  width: 100%;
}

.half {
  height: 50vh;
}

.nopadding {
  padding: 0;
}

#image_1{
  background-image:url("https://www.crockerriverside.org/sites/main/files/imagecache/pod/main-images/camera_lense_0.jpeg");
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-size:auto;
}
于 2019-09-18T12:45:10.850 回答