Bootstrap列导致水平滚动条

时间:2018-01-11 08:25:34

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

在我的工作"本网站的部分内容: Website

某些事情导致它太宽了。

当您将鼠标悬停在项目上(或触发<div class="projectbox">上的:悬停状态并查看项目图标(眼睛,github和图像)时,最后一个项目&#34;&#34;图像&#34 ;是我想的原因。

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

相关代码:

Relevant code

5 个答案:

答案 0 :(得分:6)

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

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

以下是您的需求:

1).container div

2).row div

3).col div

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

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

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

答案 1 :(得分:2)

改变这个:

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

为:

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:-1)

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>