声明文章的高度

Question

我正在创建我的投资组合网站gw.mvctc.com/Class2018/smcintosh我最近将其部分转换为bootstrap，看起来没问题，但正如您所见，在主页上，有一个水平滚动到什么都没有，并且框的高度不同。我已经弄明白了。滚动的宽度与垂直滚动条的宽度相同，因此我不确定这是否是问题的一部分。

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

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

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?）。

（ btw，bootstrap 4使用flexbox ）

Answer 2

类row的div的margin-right属性设置为-15px。导航栏也设置了边距。但具体来说，div正在溢出身体。将id标记添加到名为boxcontent的div中，样式如下：

nav,#boxcontent{
margin-left:0; /*optional but adding this makes the nav full width!*/
margin-right:0;
}

修改

pen is here