引导列导致水平滚动条答案

【问题标题】：Bootstrap columns cause horizontal scrollbar引导列导致水平滚动条
【发布时间】：2018-06-20 12:28:24
【问题描述】：

在本网站的“我的工作”部分： Website

有些东西导致它太宽了。

当您将鼠标悬停在项目上时（或触发 <div class="projectbox"> 上的 :hover 状态并查看项目图标（眼睛、github 和图像），我认为是最后一个项目的“图像”导致它。

但是，我不知道这是为什么。我应该从这些按钮中删除填充吗？我觉得这不是你应该做的。（如果填充甚至是导致它发生的原因）。

相关代码：

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

改变这个：

.row {
    margin-right: -15px;
    margin-left: -15px;
}

到：

.row {
    margin-right: 0px;
    margin-left: 0px;
}

【讨论】：

嗯.. 解决了它。为什么它是从引导程序本身获得的？
这不是最好的解决方案。行必须放置在容器或容器流体中。看看这个：stackoverflow.com/questions/27758457/…
可能你有一行不在容器或容器流体中。

【解决方案2】：

水平滚动条通常是由错误地使用 Bootstrap 网格引起的。

Ben Goossens 提出的解决方案是一种 hack，应该避免，因为它使 Bootstrap 的使用毫无意义。按预期使用 Bootstrap，您将不需要任何技巧或自定义 css 体操。

这是你需要的：

1) .container div

2) .row div

3) .col div

这就是 Bootstrap 网格正常工作所需的“三位一体”。

始终将所有正常内容放入 Bootstrap 列（依次进入一行，然后进入一个容器），您不会遇到任何水平滚动条问题。

Bootstrap 行旨在与列一起使用。如果你把这两个中的一个排除在外，你就会遇到问题。

【讨论】：

是的，我就是这么想的。但是添加我之前删除的容器并没有修复它。
不仅仅是容器。行是列的容器。因此，至少有一列必须进入 Bootstrap 行。
另外，不要嵌套容器。 Bootstrap 容器不是为嵌套而设计的。您可以嵌套行和列，但不能嵌套容器。
现在我有这个： (3x)
你好像少了一个破折号...col和md之间没有空格。

【解决方案3】：

一个肮脏的小把戏对我有用。您可以在 .row 之前添加另一个 12 列网格：

<div class="col-md-12">
    <div class="row">
        <div class="col-md-12">
    </div> 
</div>

【讨论】：

这比使用!important 覆盖 Bootstrap 的原生排水沟系统要好得多，超过一半的答案试图这样做，但不幸的是，它打破了移动设备上的排水沟。

【解决方案4】：

您可以通过应用这些来解决此问题。它会工作

.col-12{
    padding-right: 0!important;
    padding-left: 0!important;
}
.row{
    margin-right: 0px;
    margin-left: 0px; 
}

【讨论】：

【解决方案5】：

将m-auto（自动边距）应用于行。

没有m-auto 自动：

.row {
  overflow-x: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
<div class="row">
  <div class="col-md">
    Column 1
  </div>
  <div class="col-md">
    Column 2
  </div>
</div>

与m-auto 自动：

.row {
  overflow-x: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> Without margin auto:
<div class="row m-auto">
  <div class="col-md">
    Column 1
  </div>
  <div class="col-md">
    Column 2
  </div>
</div>

【讨论】：

【解决方案6】：

如果您不想使用容器，因为它创建的边距，那么您可以使用 container-fluid。

<div class="container-fluid">
<div class="row">
    <div class="col-md-12">
</div>

【讨论】：