不使用填充时如何删除水平滚动条
How to remove horizontal scrollbar when using no padding
我有一个问题：
我想创建一个布局，但是一旦我删除以下代码行 (p-0) 处的填充，就会出现一个水平滚动条。有没有可能我可以删除填充并且没有滚动条出现？我不知道该怎么办，也许你们可以帮助我。问题是我想让col没有填充的全长，但是当我删除填充时，水平滚动条出现了。
...
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...
<!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">
<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" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<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 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." 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>
</body>
</html>
可能您未正确实现网格。 避免向 bootstrap classes 添加额外的样式，并在需要时使用 .row。当您需要自定义样式时，请在 .container、.row 和 .col 中使用包装器，这样您就可以在不改变 bootstrap 行为的情况下管理它们。
在你的情况下，我会从 p-0 的父 div 中删除 class row，然后删除 class col-md-12 来自 p-0，将 p-0 width 设置为 100% 并删除属性 padding:0px。无论如何，我认为你的嵌套元素中还有其他问题，所以对你来说很好的讲座是：
在div class=col-md-8的行中，删除-15px的右边距和左边距；
就像您的 （使用 m-auto 的错误答案），实际问题是 网格结构不正确 .
网格必须为container > row > col-*s > row > col-*s等...
简单回答：
“如何在不使用填充时删除水平滚动条”
遵循正确的网格结构...
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
并且，在 嵌套 列时遵循正确的网格结构...
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
</div>
</div>
那就没有水平滚动条了！
完整答案 (TL;DR)
阅读 Bootstrap 文档...
"Containers are the most basic layout element in Bootstrap and are
required when using our default grid system. "
"Rows are wrappers for columns.... In
a grid layout, content must be placed within columns and only columns
may be immediate children of rows."
- 1 - 网格需要一个 容器 -- 选择
container-fluid 以获得全宽
- 2 - 列 并且只有列 是
.row 的直接子列，其他列不是。 Read about nesting.
- 3 - 行 仅 用于换列。 内容不应直接放在
.row.
正在将您的代码与网格结构“规则”进行比较...
一个问题来了....
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
</div>
</div>
</div>
</div>
您有一个 col-12 立即嵌套在另一个 col-12 中，但这是行不通的。正确的结构是...
<div class="col-md-8">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
content here
</div>
</div>
</div>
</div>
</div>
其次，列和行被过度使用。没有理由在具有 12 个单位的列的更多行中包含 12 个单位的列。也没有理由在每个断点处使用相同的大小...
col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
等同于：
col-12
最后，应该只有一个外容器流体，而不是嵌套在容器内的容器。如果要移除列周围或列之间的间距，可以使用 special no-gutters class，这是移除整行间距（填充）的正确方法。
只需遵循 correct grid stucture 即可大大简化整个标记。通过简单地了解网格的工作原理，您将节省大量时间...
container > row >（有内容的列）> row >（有内容的列）等...
我有一个问题： 我想创建一个布局，但是一旦我删除以下代码行 (p-0) 处的填充，就会出现一个水平滚动条。有没有可能我可以删除填充并且没有滚动条出现？我不知道该怎么办，也许你们可以帮助我。问题是我想让col没有填充的全长，但是当我删除填充时，水平滚动条出现了。
...
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
...
<!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">
<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" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<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 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." 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>
</body>
</html>
可能您未正确实现网格。 避免向 bootstrap classes 添加额外的样式，并在需要时使用 .row。当您需要自定义样式时，请在 .container、.row 和 .col 中使用包装器，这样您就可以在不改变 bootstrap 行为的情况下管理它们。
在你的情况下，我会从 p-0 的父 div 中删除 class row，然后删除 class col-md-12 来自 p-0，将 p-0 width 设置为 100% 并删除属性 padding:0px。无论如何，我认为你的嵌套元素中还有其他问题，所以对你来说很好的讲座是：
在div class=col-md-8的行中，删除-15px的右边距和左边距；
就像您的 m-auto 的错误答案），实际问题是 网格结构不正确 .
网格必须为container > row > col-*s > row > col-*s等...
简单回答：
“如何在不使用填充时删除水平滚动条”
遵循正确的网格结构...
<div class="container-fluid">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
并且，在 嵌套 列时遵循正确的网格结构...
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="row">
<div class="col-12 bg-info p-0">
no padding
</div>
</div>
</div>
</div>
</div>
那就没有水平滚动条了！
完整答案 (TL;DR)
阅读 Bootstrap 文档...
"Containers are the most basic layout element in Bootstrap and are required when using our default grid system. "
"Rows are wrappers for columns.... In a grid layout, content must be placed within columns and only columns may be immediate children of rows."
- 1 - 网格需要一个 容器 -- 选择
container-fluid以获得全宽 - 2 - 列 并且只有列 是
.row的直接子列，其他列不是。 Read about nesting. - 3 - 行 仅 用于换列。 内容不应直接放在
.row.
正在将您的代码与网格结构“规则”进行比较...
一个问题来了....
<div class="col-md-8 ">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
</div>
</div>
</div>
</div>
您有一个 col-12 立即嵌套在另一个 col-12 中，但这是行不通的。正确的结构是...
<div class="col-md-8">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success p-0">
content here
</div>
</div>
</div>
</div>
</div>
其次，列和行被过度使用。没有理由在具有 12 个单位的列的更多行中包含 12 个单位的列。也没有理由在每个断点处使用相同的大小...
col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
等同于：
col-12
最后，应该只有一个外容器流体，而不是嵌套在容器内的容器。如果要移除列周围或列之间的间距，可以使用 special no-gutters class，这是移除整行间距（填充）的正确方法。
只需遵循 correct grid stucture 即可大大简化整个标记。通过简单地了解网格的工作原理，您将节省大量时间...
container > row >（有内容的列）> row >（有内容的列）等...