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

【问题标题】：Full width bootstrap html/css table does not work全宽引导 html/css 表不起作用
【发布时间】：2021-10-31 10:37:40
【问题描述】：

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

【问题讨论】：

将margin:0 添加到您的行类。 Bootstrap 给它每边 15px 的边距。
它是由 .row 类引起的。特别是margin-left：-15px；覆盖它，它会解决你的问题

标签： html css html-table full-width

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

.fill-row {
    margin: 0; 
}

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

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

【讨论】：

【解决方案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;
}

【讨论】：