全角引導HTML / CSS表不起作用
[英]Full width bootstrap html/css table does not work
問題描述
<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 個解決方案
解決方案1
0 2019-09-18 12:40:00
從類行/填充行中刪除邊距樣式。
解決方案2
0 已采納 2019-09-18 12:40:05
給類fill-row 0px的邊距，您會在右邊角沒有空格。
<!DOCTYPE html> <html> <head> <title>Efficienza Energia Spa</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>
我已經在代碼中注釋了，保證金必須設置為零。
解決方案3
0 2019-09-18 12:41:09
在下面添加樣式應刪除右側的空白
.fill-row {
margin: 0;
}
似乎正在發生的是.row類正在添加以下樣式：
margin-right: -15px;
margin-left: -15px;
解決方案4
0 2019-09-18 12:45:10
只需使用container-fluid並從列中刪除填充，也不要忘記將<body> height和width分別設置為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選項卡不占用屏幕的整個寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.