html - Bootstrap 中行元素的填充不均匀

Question

我在 Twitter Bootstrap 中有一个由 4 行组成的网格布局。

我希望每一行的高度均匀，每一行的内容之间的填充相等。

然而，行上的填充目前是不相等的。

例如，'Technologies' 和 hr 行中 li 项底部的空间比'Education' 底部的空间窄得多。

我在我的 CSS 中看不到哪里出错了，但是我怎样才能在整个过程中应用相等的填充？提前致谢

Here is the link to my website where the issue is.

<div class="container">

    <div id="greeting">
            <p>
                My interest in coding primarily stemmed from my day job which exposed me to the basics of HTML. I've still got a long way to go but it's my ambition to forge a long-term career as a developer, and I'm very determined to reach my goal.
            </p>
    </div>
    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Technologies</h2>
        </div>
        <div class="col-md-4">
            <h2 class="tech-header">Comfortable</h2>
            <ul>
                <li> HTML5</li>
                <li> CSS3</li>
                <li> Bootstrap</li>
                <li> Adobe PhotoShop</li>
            </ul>
        </div>
        <div class="col-md-4">
            <h2 class="tech-header">Finding my feet</h2>
            <ul>
                <li> JavaScript</li>
                <li> JQuery</li>
                <li> PHP</li>
                <li> SQL</li>
            </ul>
        </div>

    </div>
    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Experience</h2>
        </div>

        <div class="col-md-8">
            <h2>Reader Offer Administrator / Account Manager</h2><br><h3>Thompson &amp; Morgan - March 2007 to August 2015</h3>
            <p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
        </div>
    </div>
            <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-4">
            <h2 class="sideheader">Education</h2>
        </div>

        <div class="col-md-8">
        <h2>University of Brighton</h2><br><h3>October 2003 to July 2006</h3>
            <ul>
                <li> BA(Hons) Social Science (2:1)</li>
            </ul>
        </div>
    </div>

    <div class="hr"><hr></div>
    <div class="row">
        <div class="col-md-12" id="button">
        <a href="Jon Howlett.pdf" class="btn btn-primary btn-lg">View my full CV</a>
        </div>
    </div>

Answer 1

这是您的具体代码:

HTML:

    <div class="col-md-8">
        <h2>Reader Offer Administrator / Account Manager</h2>
        <br>    <----- REMOVE THIS
        <h3>Thompson &amp; Morgan - March 2007 to August 2015</h3>
        <p>A highly varied role acting as support to a successful and fast-moving sales team as well as contact to our client base. My primary duties were to maintain the smooth running of our order processing system, as well as oversee a range of product content across several CMSs. It was this latter part of my job which has spurred me to establish a career in web development.</p>
    </div>

CSS:

#resume h3, #resume .col-md-8 li, #resume .col-md-8 p {
  top: -60px;     <----- REMOVE THIS
  position: relative;
}

如果删除 <br/>和 top:60px;一切恢复正常。