Bootstrap 列导致水平滚动条

问题描述

在本网站的我的作品"部分:

解决方案

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

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

这是你需要的:

1) .container div

2) .row div

3) .col div

这是 Bootstrap 网格正常工作所需的三位一体".

始终将所有正常内容放入 Bootstrap 列中(依次放入一行，放入容器中)，这样就不会有任何水平滚动条问题.

Bootstrap 行旨在与列一起使用.如果你忽略这两个中的一个，你会遇到问题.

At the "My Work" section of this website:Website

something is causing it to be too wide.

When you hover over a project (or trigger the :hover state on the <div class="projectbox"> and look at the project icons (eye, github and images) the last project's "images" is what causing it I think.

However, I do not know why this is. Should I just remove the padding from these buttons? I feel like that's kind of not what you're supposed to be doing. (If the padding is even what's causing it to happen).

Relevant code:

解决方案

Horizontal scrollbars are usually caused by using the Bootstrap grid incorrectly.

The solution proposed by Ben Goossens is a hack and should be avoided because it makes the use of Bootstrap pointless. Use Bootstrap as intended and you won't need any hacks or custom css gymnastics.

Here's what you need:

1) .container div

2) .row div

3) .col div

That's the "holy trinity" you need in order for the Bootstrap grid to work properly.

Always put all of your normal content into Bootstrap columns (which in turn go into a row, which goes into a container) and you won't have any horizontal scrollbar issues.

The Bootstrap rows are designed to work with columns together. If you leave one of those 2 out, you're gonna run into issues.

这篇关于Bootstrap 列导致水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！