全宽引导 html/css 表不起作用

debugcn 发表于 Dev

simone_meh

        <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 个块来覆盖整个屏幕，而没有右边的空白区域。

海瑞兹

将边距设置为 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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。