全角 bootstrap html/css table 不起作用

Question

        <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 个方块覆盖整个屏幕，右边没有白色 space。

Answer 1

从 class row/fill-row 中删除边距样式。

Answer 2

给 class fill-row 0px 的边距，你得到它的右角没有 space。

<!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>

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

Answer 3

添加下面的样式应该去掉右边的白色space

.fill-row {
    margin: 0; 
}

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

margin-right: -15px;
margin-left: -15px;

Answer 4

只需使用 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;
}

全角 bootstrap html/css table 不起作用

Full width bootstrap html/css table does not work

html

css

html-table

full-width