html - 为什么这个引导模板有一个从左到右的滚动条？
问题描述
我目前正在学习 Bootstrap 4，并正在为我的个人学习创建一个 Bootstrap 4 模板。但是，当您在浏览器中查看时，以下代码会在网站上创建一个从左到右的滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Practice</title>
<meta name="viewport" content="wdith-device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style>
.Box{padding: 60px 10px; background: #ddd}
.Box:nth-child(even){background: #eee;}
h1, h2{margin: 30px 0;}
.container-fluid, .container{max-width:1400px;}
.carousel-indicators li {width: 10px; height: 10px; border-radius: 100%;}
/* .navbar-brand{position: relative;}
.custom-nav{position: absolute;}*/
</style>
</head>
<body>
<!-- MODAL POPUP -->
<div class="modal fade" id="modalExample">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title"> Modal Title </h2>
<button class="close" type="button" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div> <!-- end .modal-content -->
</div> <!-- end .modal-dialog -->
</div> <!-- end .modal -->
<!-- MODAL END-->
<nav class="navbar navbar-expand-lg navbar-light bg-light row">
<a class="navbar-brand col-1 border border-primary" href="#">Navbar</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-11 custom-nav border border-primary" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Tab 1</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Tab</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
<li class="nav-item"><a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Tab 2</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption"><h5>Image 1</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption"><h5>Image 2</h5></div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption"><h5>Image 3</h5></div>
</div>
</div>
<a class="carousel-control-prev"href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next"href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="jumbotron jumbotron-fluid row">
<div class="offset-1 col-10">
<h1 class="display-1">Heading 1</h1>
<p class="h1">"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p class="lead">Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
</div>
<div class='container'>
<!-- ACCORDION -->
<div class="card-group" id="exampleAccordion">
<div class="card">
<div class="card-header text-white bg-primary">
<h3 class="card-title" data-target="#card-1" data-toggle="collapse">Accordion Example 1</h3>
</div>
<div class="collapse" id="card-1">
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
<!-- Accordion은 기본적으로 열리고 닫히는 dropdown과 비슷한 기능을 가진 element라고 보면 된다. -->
<!-- Accordion은 collapse를 사용하여 만든다. -->
<div class="card-deck">
<div class="card">
<div class="card-header text-white bg-primary">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><a href="#" data-toggle="tooltip" data-placement="bottom" title="This is the info you are looking for... #1">More Info</a></p>
</div>
</div>
<div class="card">
<div class="card-header text-white bg-danger">
<h1>Heading 1</h1>
</div>
<div class="card-body">
<p>"Begin today!" That's all the note said. There was no indication from where it came or who may have written it. Had it been meant for someone else? Meghan looked around the room, but nobody made eye contact back. For a brief moment, she thought it might be a message for her to follow her dreams, but ultimately decided it was easier to ignore it as she crumpled it up and threw it away.</p>
<p>Stranded. Yes, she was now the first person ever to land on Venus, but that was of little consequence. Her name would be read by millions in school as the first to land here, but that celebrity would never actually be seen by her. She looked at the control panel and knew there was nothing that would ever get it back into working order. She was the first and it was not clear this would also be her last.</p>
</div>
<div class="card-footer">
<p><span data-toggle="modal" data-target="#modalExample"><a href="#" data-toggle="tooltip" data-placement="bottom" title="The Title">More Info</a></p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
$(".nav li a").on("click", function(){
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$('.carousel').carousel({
pause: false,
});
</script>
</body>
</html>
我找不到这可能的原因......有人知道为什么会这样吗？我希望网页仅 100% 显示在屏幕上，而不必从左向右滚动。
https://jsfiddle.net/8wvszpqa/
*编辑：我的意思是滚动条是下面的图片之一：
解决方案
我不确定您的问题，但尝试提供帮助。从您的脚本中删除这些代码以摆脱该栏。
<div class="container">
<div class="carousel slide" id="ExampleSlide" data-ride="carousel" data-interval="1000">
<ol class="carousel-indicators">
<li data-target="#ExampleSlide" data-slide-to="0" class="active"></li>
<li data-target="#ExampleSlide" data-slide-to="1"></li>
<li data-target="#ExampleSlide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="1.png">
<div class="carousel-caption">
<h5>Image 1</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="2.png">
<div class="carousel-caption">
<h5>Image 2</h5>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="3.png">
<div class="carousel-caption">
<h5>Image 3</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#ExampleSlide" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#ExampleSlide" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
推荐阅读
- sql-server - SQL Server中给定节点下高效查询树的Graph Tables结构的适当实现
- android - SimpleExoPlayer.Builder 与 ExoPlayer.Builder 的区别？
- c - 从头到尾读取文件的最快方法是什么？
- r - 带有 geom_text_repel 和 geom_point 的颜色图例
- r - R flextable proc_freq 删除标签列
- firebase - 多张图片上传并获取下载网址 - Firebase
- jmeter - 使用 jmeter 将 json 有效负载发送到 mqtt
- r - R：让我了解时间序列预测包的准确性功能
- delphi - RAD Sever 中的多个 FireDAC 包
- java - 有没有办法在 Junit5 的 Java 测试类中找到 @Disabled 测试？