html - 声明文章的高度

Question

我正在创建我的投资组合网站 gw.mvctc.com/Class2018/smcintosh我最近将它部分转换为 bootstrap，看起来还不错，但是正如你所看到的，在主页上，有一个水平滚动条到什么都没有，而且盒子的高度也不一样。我已经弄清楚水平。 scroll 与垂直滚动条的宽度相同，所以我不确定这是否是问题的一部分。

如何解决水平滚动问题以及如何使框的高度相同？

目前我的文章中有这个样式代码，有框的对象:

article {
    padding: 10px;
    border: #ff4100 solid 7.5px;
    border-radius: 15px;
}

这是文章本身的 HTML:

<div class="fluid-container">
    <div class="row">
        <section class="col-lg-4 col-md-6 col-sm-6">
            <article>
                <h2>Education Goals</h2>
                <ul>
                    <li>At the moment my largest education goal is to graduate
                        from high school</li>
                    <li>I hope to have enough scholarships to be able to go to a
                        good college to further my education and gain more knowledge</li>
                    <li>I hope to graduate from a good college with a bachelor's
                        degree in some form of computer science</li>
                </ul>
            </article>
        </section>
        //More sections follow, hence the 2 other boxes
        //...
    </div>
</div> 

Answer 1

水平滚动条的问题在于您正在应用 fluid-container 类，而它应该是 container-fluid。

对于高度，您可以使用像 matchHeight 这样的插件或覆盖 Bootstrap CSS 并使其使用 flexbox(参见 How can I make Bootstrap columns all the same height?)。

(顺便说一句，bootstrap 4 使用 flexbox)