我的引导页面上有这个恼人的水平滚动条.无法弄清楚是什么让它表现得像这样或怎么办?
JsFiddle链接:http://jsfiddle.net/FatAlbert/cd1syrd9/2/
HTML:
<body>
<div class="wrapper">
<div class="row">
<div class="header">
<div class="container">
<!-- navigation-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
<a class="navbar-brand" href="#"><img src="xxx" /></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav><!-- / navigation-->
</div>
</div><!-- / header-->
</div><!-- / container-->
<div class="row">
<div class="first-page-content">
<div class="container">
<img class="img-responsive img-big" src="xx" />
<p>
Lorem ipsum …Run Code Online (Sandbox Code Playgroud) 我有个问题:
我想创建一个 chatwebapp 并使用 Bootstrap 进行布局。不幸的是,通过以下代码,我得到了一个不应该存在的水平滚动条。我使用列和行,我知道 bootstrap css 中有一个填充,但是当我尝试删除它时,什么也没有发生,滚动条仍留在那里。也许你们可以帮助我。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="col-md-12">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span> …Run Code Online (Sandbox Code Playgroud)