用 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; }最新问题
- Div 中的角度组件结构
- 将 pct_change 用于 DateTime (sub)Index 并使用 group_by 用于多索引数据框
- Next.JS/React 表单，执行顺序问题
- java CriteriBuilder 掩码列值
- 天蓝色政策 |拒绝从虚拟机中删除用户分配的身份的操作不起作用
- Pandas - 使用 pct_change 作为 DateTime (sub)Index 以及使用 group_by 作为多索引数据框
- 如何将数据从 Azure Cosmos DB 帐户导出到本地 .json 文件？
- 风格的matter-js主体
- 在并发 Haskell 中原子地修改多个 IORef
- 如何从 Java 中的静态上下文动态访问非静态变量？
- 在 MobileDateTimePicker (MUI) 中将时钟更改为 MultiSectionDigitalClock
- 如何在 ADLS 中使用 Python 解压受密码保护的 zip 文件
- 启动、停止和监视其他脚本的主脚本（Python Watchdog）
- VS Code 不对打字稿文件进行类型检查
- vue.js 新手，我如何将模型与组件分开
- 将volume_up_key_code 115从Raspberry Pi 5发送到iPhone
- 通过与别名的关联进行 Sequelize 分组（model->model2 AS 'alias'）
- 顺序访问大尺寸向量时是否可以减少缓存未命中？
- 如何在 Spring Data Rest 中保护 RepositoryRestResource
- 如何在登录 Astro 应用程序的同时注销 Shopify API？
© www.soinside.com 2019 - 2024. All rights reserved.