用 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; }最新问题
- 岭回归的Scratch实现
- 如何使表格单元格高度相等而不使一个单元格上的图像超出表格？
- 如何强制使用 Win-PS2EXE 编译的 EXE Powershell 脚本在 Powershell 7 上运行
- 如何在 shell 中逐行处理命令的输出？
- 为什么我的 NextJS 应用程序的 Dockerfile 在构建镜像时非常慢并且大小巨大
- 如何从iframe中删除滚动条？
- 如何修复“paths[0]”参数必须为字符串类型。使用 ExpressJS 引入 Mustache 部分时收到“数组实例”错误？
- Spotify 网络播放器 SDK。身份验证错误：令牌范围无效
- 在bash中以数学表达式的形式执行输入
- 无法执行Maven项目
- Flutter App 无法部署在 Vercel 上：无法下载 https:// <blah blah>/flutter_patched_sdk_product.zip
- 开启代理时出现ERR_QUIC_PROTOCOL_ERROR cloudflare
- 如何在C++中到达根目录？
- AWS-MWAA 上的 Selenium 和 Chromium
- Angular Jasmine 测试继续之前的测试
- 如何创建覆盖层以在页面加载时自动加载？ [已关闭]
- 我的 Makefile 中的强制重建实际上是如何工作的？
- 执行.onSubmit时键盘弹起（@FocusState）
- 使用异常链的原因是什么
- 优化 PowerShell 脚本以进行远程执行和并行处理
© www.soinside.com 2019 - 2024. All rights reserved.