引导列导致水平滚动条 [英] Bootstrap columns cause horizontal scrollbar

问题描述

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

解决方案

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

Ben Goossens提出的解决方案是一个hack，应该避免使用，因为它使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.

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