用 Bootsrap 制作的网站右侧的空间不会消失吗？
问题描述 投票：0回答：1
无论我做什么，我用 Bootsrap 制作的网站右侧的空白都没有消失。如果有解决办法请告诉我
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact | Enba Camping</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="stylesheet" href="style/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<!-- NAV -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 p-0">
<nav class="navbar navbar-expand-lg bg-body-tertiary p-0 ">
<div class="container-fluid bg-dark ">
<a class="navbar-brand text-light mb-2" href="index.html">Enba Camping</a>
<button class="navbar-toggler btn btn-light btn btn-outline-light bg-light m-2"
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" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
<a class="nav-link text-light text-center" aria-current="page"
href="index.html">Home</a>
<a class="nav-link text-light text-center" href="aboutus.html">About us</a>
<a class="nav-link active text-light text-center" href="contact.html"
aria-disabled="true">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- NAV END -->
<!-- ABOUT US -->
<div class="container-fluid p-0 bg-dark text-light">
<div class="row">
<div class="col-sm-6 ps-0">
<img src="images/lesly-derksen-F4fH5dAfZnE-unsplash.jpg" alt="" class=" d-block w-100 c-img ">
</div>
<div class="col-sm-6 d-flex justify-content-center align-items-center ">
<div class="text-center">
<h2 class="fw-bold display-4 ">Bize Ulaşın</h2>
<!-- ABOUT US -->
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Adınız</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="Name">
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email Adres</label>
<input type="email" class="form-control" id="exampleFormControlInput1"
placeholder="Email Address">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Mesajınız</label>
<textarea class="form-control" id="exampleFormControlTextarea1" placeholder="Message"
rows="3"></textarea>
</div>
<div class=" gap-2 d-md-block ">
<button class="btn btn-light " type="button">Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- ABOUT US END -->
<!-- PRODUCT -->
<div class="container mt-sm-5">
<div class="row text-center ">
<h1 class="d-flex justify-content-center">Mekanlarımız</h1>
<hr>
<div class="col-sm-4 mb-2">
<div class="card">
<img src="images/card2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Orman İçi Karavan Parkı</h5>
<p class="card-text">Ormanın içinde konumlanan karavan parkımız, tam anlamıyla bir doğa
kaçamağı
sunuyor. Ormanın huzurlu atmosferinde kendinizi kaybedin. Karavanınızla konforlu bir
konaklama deneyimi yaşayın.</p>
<a href="#" class="btn btn-dark">Rezervasyon için tıklayınız </a>
</div>
</div>
</div>
<div class="col-sm-4 mb-2">
<div class="card">
<img src="images/card3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Orman İçi Çadırlı Kamp</h5>
<p class="card-text">Orman içi çadırlı kamp alanımız, doğa severler için bir cennet.
Gölgeli
ağaçlar arasında konumlanan çadırlarımızda, kuş cıvıltıları ve huzur içinde bir
konaklama
deneyimi sizi bekliyor.</p>
<a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a>
</div>
</div>
</div>
<div class="col-sm-4 mb-2">
<div class="card">
<img src="images/card1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dağ Evi </h5>
<p class="card-text">Dağ evimiz, şehrin gürültüsünden uzak,huzurlu bir konaklama imkanı
sunuyor.
Ferah odalarımızda dağ manzarasının keyfini çıkarabilir, gölet kenarındaki
aktivitelerle
vakit geçirebilirsiniz.</p>
<a href="#" class="btn btn-dark">Rezervasyon için tıklayınız</a>
</div>
</div>
</div>
</div>
</div>
<!-- PRODUCT END -->
<!-- PROJECT -->
<div class="row my-4">
<div class="col-sm-12">
<h1 class="d-flex justify-content-center">Galeri</h1>
<hr>
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/hichem-meghachou-7I-Rj_E9ihI-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/jimmy-conover-J_XuXX9m0KM-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/josh-campbell-UbbjVyibFuc-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/shelby-cohron-ESNV6KmLJMg-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/tegan-mierle-fDostElVhN8-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
<div class="col-sm col-6 mb-1"><img src="images/galeri/toa-heftiba-x9I-6yoXrXE-unsplash.jpg" alt=""
class="w-100 img-thumbnail">
</div>
</div>
<!-- PROJECT END -->
<!-- FOOTER -->
<div class="bg-dark text-light">
<div class="container">
<footer class="pt-5 mt-5 ">
<div class="row ">
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column ">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a>
</li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Features</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">Pricing</a>
</li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-light">About</a>
</li>
</ul>
</div>
<div class="col-md-5 offset-md-1 mb-3">
<form>
<h4>
Abone Ol ve Doğanın Güzelliklerini Kaçırma!</h4>
<p class="fs-6">Doğanın kucaklayıcı atmosferine adım atmak, huzurla dolu anlar
yaşamak ve
Enba Camping'in sunduğu özel fırsatları kaçırmamak için hemen abone ol! Sitemize
abone
olarak, doğanın gizemli güzellikleri, özel indirimler ve etkinliklerden ilk sen
haberdar
olacaksın.</p>
<p class="fs-6">
Unutulmaz anılar biriktirmek ve doğanın kollarında huzurlu bir deneyim yaşamak
için
abone ol, Enba Camping'in eşsiz dünyasına adımını at! 🏕️✨
</p>
<div class="d-flex flex-column flex-sm-row w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="text" class="form-control"
placeholder="Email address">
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex flex-column flex-sm-row justify-content-between border-top">
<p>© 2023 Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24"
height="24">
<use xlink:href="#twitter"></use>
</svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24"
height="24">
<use xlink:href="#instagram"></use>
</svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24"
height="24">
<use xlink:href="#facebook"></use>
</svg></a></li>
</ul>
</div>
</footer>
</div>
</div>
<!-- FOOTER END -->
</body>
</html>
和CSS
.jumb
{
vertical-align: inherit;
}
p
{
font-size: 24px;
}
.c-item
{
height: 480px;
}
.c-img
{
height: 100%;
object-fit: cover;
filter:brightness(0.9)
}
1个回答
0
投票
投票
请将这段代码添加到您的 CSS 文件中。然后，它就会起作用。
.row{ margin-right: 0px; }最新问题
- 使用 docker-compose 初始化 MariaDb
- 我如何知道 dsa_loop 和 dsa_loop_bdinfo Linux 内核模块何时工作？
- 最新的 kaboom 中 origin() 相当于什么？
- 需要 TRUE/FALSE 的缺失值：典型相关分析（cc CCA 包）
- 如果没有找到结果则返回null默认值
- 缩放画布元素并保持纵横比
- 无法从源解析导入[模块]PylancereportMissingModuleSource
- 如何使用Java创建虚拟IP地址
- 这个简单的for嵌套循环的逻辑是什么？
- Spring启动网关错误：io.netty.channel.AbstractChannel$AnnotatedConnectException：连接超时：没有更多信息：/192.168.1.4:5001
- 为什么我的VSCode使用Mingw64编译以汉字为文件名的C源代码时会产生乱码的可执行文件名？
- 我有一个像 DATE 这样的列，想使用 withColumnRenamed 重命名为 DATE 但仍然不一样
- “symfony new”控制台命令中的“php=value”参数有何用途？
- 如何为不同的模板参数创建不同的构造函数？ `requires` 关键字不起作用
- 通过 php-deployer 部署后重新加载 php-fpm，无需密码
- Android 中的数据检索无法正常工作
- Android 中的持久文件描述符
- 使用Python插件中的imgui
- `void 0`是什么意思？ [重复]
- 使用新的基于 GIS 的数据从 JAGS 模型（R2jags 包）预测新的观测结果
© www.soinside.com 2019 - 2024. All rights reserved.