Bootstrap 行导致水平滚动条
[英] Bootstrap row causes horizontal scrollbar
本文介绍了Bootstrap 行导致水平滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有问题:
我想创建一个聊天网络应用程序并使用 Bootstrap 进行布局.不幸的是，使用以下代码，我得到了一个不应该在那里的水平滚动条.我使用列和行，我知道引导 css 中有一个填充，但是当我尝试删除它时，实际上什么也没发生并且滚动条停留在那里.也许你们可以帮我解决这个问题.
<html lang="zh-cn"><头><title>引导程序示例</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><身体><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="#">带文本的导航栏</a><按钮类=导航栏切换器"类型=按钮"数据切换=折叠"数据目标=#navbarText"咏叹调控制=导航栏文本"咏叹调扩展=假"aria-label="切换导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">特征</a><li class="nav-item"><a class="nav-link" href="#">价钱</a><span class="navbar-text">带有内联元素的导航栏文本</span>
</nav>
<div class="container-fluid"><div class="row"><div class="col-md-4 bg-success"><div><div class="row m-1"><div class="col-md-11">聊天
<div class="col-md-1"><i class="fas fa-plus-circle"></i>
<div class="row mb-2"><div class="col-md-12"><form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search"/><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button></表单>
<div class="row"><div class="col-md-12"><div class="list-group"><div><a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">列出组项目标题</h5><small>3 天前</small>
<div class="row"><div class="col-md-11">Donec id elit non mi porta...
<div class="col-md-1"><span class="徽章徽章-主要徽章-药丸文本-权利">5</span>
</a>
<div class="col-md-8 bg-primary"><div><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><img class="image-head-chat" alt="响应式图片"/>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">文本
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">图标
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">新闻报
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">英加贝<div class="row">形式
解决方案
通过添加类 m-auto 将行的边距设置为 auto.
<html lang="zh-cn"><头><title>引导程序示例</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><身体><div><div class="row m-auto"><div class="col-md-12 p-0"><div><nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">带文本的导航栏</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><div class="collapse navbar-collapse" id="navbarText"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a><li class="nav-item"><a class="nav-link" href="#">特征</a><li class="nav-item"><a class="nav-link" href="#">价钱</a><span class="navbar-text">带有内联元素的导航栏文本</span>
</nav>
<div class="container-fluid"><div class="row"><div class="col-md-4 bg-success"><div><div class="row m-1"><div class="col-md-11">聊天
<div class="col-md-1"><i class="fas fa-plus-circle"></i>
<div class="row mb-2"><div class="col-md-12"><form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}><input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search"/><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button></表单>
<div class="row"><div class="col-md-12"><div class="list-group"><div><a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1">列出组项目标题</h5><small>3 天前</small>
<div class="row"><div class="col-md-11">Donec id elit non mi porta...
<div class="col-md-1"><span class="徽章徽章-主要徽章-药丸文本-权利">5</span>
</a>
<div class="col-md-8 bg-primary"><div><div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 "><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><div class="row"><div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2"><img class="image-head-chat" alt="响应式图片"/>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">文本
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">图标
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">新闻报
<div class="row"><div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">英加贝<div class="row">形式
I have a problem:
I want to create a chatwebapp and use Bootstrap for the layout. Unfortunatelly with the following code i get a horizonatl scrollbar that shouldnt be there. I use columns and rows and i know there is a padding within the bootstrap css but when i try to remove it, nothing really happens and the scrollbar stays there. Maybe you guys can help me with that.
<!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>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-success">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
Set the margin of the row to auto by adding the class m-auto.
<!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 m-auto">
<div class="col-md-12 p-0">
<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>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-success">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Nachrichten
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
Eingabe
<div class="row">
Form
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这篇关于Bootstrap 行导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
