html - 页面右侧有奇怪的小白间距
问题描述
我的整个页面右侧有奇怪的白色间距，我不知道它来自哪里。我试图重置填充和边距，但显然它没有帮助。这是我第一次使用引导程序，我猜它可能与它有关，但我似乎默认引导程序没有类似的东西，而且我使用的基本上都是 col-x 的东西。
样式.css
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
html,
body {
height: 100%;
width: 100%;
font-family: "Poppins", sans-serif;
color: #222;
padding: 0;
margin: 0;
}
/*--Navigation--*/
.navbar {
padding: 0.8rem;
}
.navbar-nav li {
padding-right: 20px;
}
.nav-link {
font-size: 1.1em !important;
color: #f7f7f7;
}
.nav-link:hover {
color: #f7f7f7;
}
.bg-blue {
background-color: #12232e;
border-bottom: 3px solid #007cc7;
}
.navbar-brand h1 {
color: #f7f7f7;
}
.navbar-brand h1:hover {
color: #f7f7f7;
text-decoration: none;
}
.navbar .navbar-nav .nav-link {
position: relative;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #f7f7f7;
color: #f7f7f7;
width: 0%;
content: "";
height: 3px;
transition: all 0.5s;
}
.navbar .navbar-nav .nav-link:hover::after {
width: 100%;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link:active {
width: 100%;
color: #f7f7f7;
}
.nav-item {
font-size: 130%;
}
.custom-toggler.navbar-toggler {
border-color: rgb(247, 247, 247);
}
.navButton {
float: right;
width: 45%;
height: 35%;
}
/*--Navigation--*/
/*--Slider--*/
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
/*--Slider--*/
/*--Jumbotron/Welcome--*/
.lead {
font-size: 145%;
}
/*--Jumbotron/Welcome--*/
/*--footer--*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d6d6d6;
width: 75%;
}
/*--footer--*/
/*---Media Queries --*/
@media (max-width: 1162px) {
.carousel-caption h1 {
font-size: 350%;
}
}
@media (max-width: 768px) {
.carousel-caption {
top: 45%;
}
.carousel-caption h1 {
font-size: 250%;
}
.carousel-caption h3 {
font-size: 140%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
.display-4 {
font-size: 200%;
}
.navButton {
float: right;
width: 50%;
}
.navbar-toggler {
float: right;
}
}
@media (max-width: 576px) {
.carousel-caption {
font-size: 70%;
top: 40%;
}
.carousel-caption h1 {
font-size: 150%;
}
.carousel-caption h3 {
font-size: 110%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.nav-link {
font-size: 60% !important;
}
.navbar-toggler {
float: right;
}
.navButton {
float: none;
width: 100%;
}
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0 !important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url("img/mac.png");
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/
索引.php
<?php
include_once('header.php');
?>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button
class="navbar-toggler custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6"><hr class="my-4" /></div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<?php
include_once('footer.php');
?>
</body>
</html>
头文件.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
页脚.php
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>email@myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>email@myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>
解决方案
我在CodePen中重新创建了您的问题并检查了元素...
页面右侧的空间是由一个比其他所有元素都宽的元素创建的。有一个来自_grid.scssfor的 CSS 规则.row。一个简单的解决方法是用!important下面的方法覆盖它。
.row{
margin-left: 0 !important;
margin-right: 0 !important;
} <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<hr class="my-4" />
</div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>email@myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>email@myemail.com</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>
</body>