Bootstrap列导致水平滚动条

Question

在我的工作＆＃34;本网站的部分内容： Website

某些事情导致它太宽了。

当您将鼠标悬停在项目上（或触发<div class="projectbox">上的：悬停状态并查看项目图标（眼睛，github和图像）时，最后一个项目＆＃34;＆＃34;图像＆＃34 ;是我想的原因。

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

相关代码：

Answer 1

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

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

以下是您的需求：

1）.container div

2）.row div

3）.col div

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

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

Bootstrap行旨在与列一起使用。如果你把其中一个留下，你就会遇到问题。

Answer 2

改变这个：

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

为：

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

Answer 3

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

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

Answer 4

您可以通过应用这些方法解决此问题。会起作用的

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

Answer 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>