提问人：Martín Pérez Ruiz 提问时间：11/17/2023 最后编辑：Minal ChauhanMartín Pérez Ruiz 更新时间：11/17/2023 访问量：39
如何删除网页右侧的空白区域？，保持它响应，不知不觉
How do I delete the blank space of the webpage, on the right side? , maintaining it responsive, obviusly
问：
我希望右侧没有空白。在这种情况下，我不知道如何修改 Bootstrap 代码，也不知道如何对 CSS 进行编码以获得所需的布局，或者我是否需要在代码中的某个地方放置边距 0 或填充 0。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
width: auto;
}
body {
margin: 0;
padding: 0;
}
.navbar-nav {
font-weight: lighter;
margin: 0;
}
.card-text {
color: #707070;
}
.card-img-top {
height: 500px;
object-fit: cover;
}
#form_title {
text-align: center;
padding-bottom: 15px;
}
#form_button {
text-align: center;
}
b {
font-weight: bold;
}
footer {
background-color: #28a745;
color: #fff;
padding: 40px;
width: 100%;
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta viewport="width=device-width, initial-scale=1.0">
<title>CUPPON</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./assets/CSS/style.css">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">CUPPON</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="assets/img/plumón.jpg" class="card-img-top" alt="Plumón de cama">
<div class="card-body">
<h5 class="card-title">Plumón Coral Fleece estampado en modelo y tamaño a elección</h5>
<p class="card-text">Plumones Manolino<br><i class="fa-solid fa-location-dot"></i>
9191 Avenida Vitacura, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$45.990</small>
<b>$20.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/plato.jpg" class="card-img-top" alt="Plato de comida gourmet">
<div class="card-body">
<h5 class="card-title">Entrada para compartir + platos de fondo + postres + bebestibles</h5>
<p class="card-text">V for Vegan<br><i class="fa-solid fa-location-dot"></i>
777 Jesse Pinkman, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$60.000</small>
<b>$10.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/dentista.jpg" class="card-img-top" alt="Sala dental">
<div class="card-body">
<h5 class="card-title">Tratamiento Dental Integral</h5>
<p class="card-text">Clínica Dental CumCum<br><i class="fa-solid fa-location-dot"></i>
258 Papelucho Street, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$350.000</small>
<b>$180.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/charquican.jpeg" class="card-img-top" alt="Charquicán">
<div class="card-body">
<h5 class="card-title">Plato Típico Chileno</h5>
<p class="card-text">La Maestranza<br><i class="fa-solid fa-location-dot"></i>
Local 20, Barrio Franklin, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$8.000</small>
<b>$5.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/kids.webp" class="card-img-top" alt="Centro recreacional para niños">
<div class="card-body">
<h5 class="card-title">2 Entradas para Kidzito</h5>
<p class="card-text">Kidzito<br><i class="fa-solid fa-location-dot"></i>
654 Chatacura, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$18.000</small>
<b>$10.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/san_pedro.jpg" class="card-img-top" alt="San Pedro de Atacama">
<div class="card-body">
<h5 class="card-title">Derecho de Alojamiento en Carpa en San Pedro de Atacama</h5>
<p class="card-text">Atacama Camping<br><i class="fa-solid fa-location-dot"></i>
San Pedro de Atacama, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">45.000</small>
<b>$20.000</b>
</div>
</div>
</div>
</div>
<footer>
<form>
<h5 id="form_title">Recibe cupones en tu correo</h5>
<div class="mb-3">
<input type="text" class="form-control" id="exampleInputText1" aria-describedby="nameHelp">
</div>
<div class="mb-3">
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div id="form_button">
<button class="btn btn-primary" type="submit">Enviar</button>
</div>
</form>
</footer>
<script src="https://kit.fontawesome.com/e186ec11fa.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>当我在正文中放置边距 0 和填充 0 时，没有任何变化。我将不胜感激任何帮助来纠正我的代码。
答：
0赞
krishna
11/24/2023
#1
您需要在行的外部使用 container 或 container-fluid，因为行使用减边距，因此会生成滚动条。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
width: auto;
}
body {
margin: 0;
padding: 0;
}
.navbar-nav {
font-weight: lighter;
margin: 0;
}
.card-text {
color: #707070;
}
.card-img-top {
height: 500px;
object-fit: cover;
}
#form_title {
text-align: center;
padding-bottom: 15px;
}
#form_button {
text-align: center;
}
b {
font-weight: bold;
}
footer {
background-color: #28a745;
color: #fff;
padding: 40px;
width: 100%;
box-sizing: border-box;
} <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta viewport="width=device-width, initial-scale=1.0">
<title>CUPPON</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./assets/CSS/style.css">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">CUPPON</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid py-3">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="assets/img/plumón.jpg" class="card-img-top" alt="Plumón de cama">
<div class="card-body">
<h5 class="card-title">Plumón Coral Fleece estampado en modelo y tamaño a elección</h5>
<p class="card-text">Plumones Manolino<br><i class="fa-solid fa-location-dot"></i>
9191 Avenida Vitacura, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$45.990</small>
<b>$20.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/plato.jpg" class="card-img-top" alt="Plato de comida gourmet">
<div class="card-body">
<h5 class="card-title">Entrada para compartir + platos de fondo + postres + bebestibles</h5>
<p class="card-text">V for Vegan<br><i class="fa-solid fa-location-dot"></i>
777 Jesse Pinkman, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$60.000</small>
<b>$10.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/dentista.jpg" class="card-img-top" alt="Sala dental">
<div class="card-body">
<h5 class="card-title">Tratamiento Dental Integral</h5>
<p class="card-text">Clínica Dental CumCum<br><i class="fa-solid fa-location-dot"></i>
258 Papelucho Street, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$350.000</small>
<b>$180.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/charquican.jpeg" class="card-img-top" alt="Charquicán">
<div class="card-body">
<h5 class="card-title">Plato Típico Chileno</h5>
<p class="card-text">La Maestranza<br><i class="fa-solid fa-location-dot"></i>
Local 20, Barrio Franklin, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$8.000</small>
<b>$5.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/kids.webp" class="card-img-top" alt="Centro recreacional para niños">
<div class="card-body">
<h5 class="card-title">2 Entradas para Kidzito</h5>
<p class="card-text">Kidzito<br><i class="fa-solid fa-location-dot"></i>
654 Chatacura, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$18.000</small>
<b>$10.000</b>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="assets/img/san_pedro.jpg" class="card-img-top" alt="San Pedro de Atacama">
<div class="card-body">
<h5 class="card-title">Derecho de Alojamiento en Carpa en San Pedro de Atacama</h5>
<p class="card-text">Atacama Camping<br><i class="fa-solid fa-location-dot"></i>
San Pedro de Atacama, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">45.000</small>
<b>$20.000</b>
</div>
</div>
</div>
</div>
</div>
<footer>
<form>
<h5 id="form_title">Recibe cupones en tu correo</h5>
<div class="mb-3">
<input type="text" class="form-control" id="exampleInputText1" aria-describedby="nameHelp">
</div>
<div class="mb-3">
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div id="form_button">
<button class="btn btn-primary" type="submit">Enviar</button>
</div>
</form>
</footer>
<script src="https://kit.fontawesome.com/e186ec11fa.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>
评论
<div class="row row-cols-1 row-cols-md-3 g-4"><div class="container-fluid">