html - 无法完美对齐 Bootstrap 行

Question

我无法让这些 Bootstrap 行正确对齐。我摆弄了宽度、边距和填充，但我无法找出问题所在。任何解决方案或建议将不胜感激。

https://jsfiddle.net/so155kj7/

HTML

<header class="container">
        <h1>Projects</h1>
    </header>
    <section class="container">

        <div class="row">
            <div class="tile col-md-3"></div>
            <div class="tileLong col-md-6"></div>
        </div>

        <div class="row">
            <div class="tile col-md-3"></div>
            <div class="tile col-md-3"></div>
            <div class="tile col-md-3"></div>
        </div>

        <div class="row">
            <div class="tileLong col-md-6"></div>
            <div class="tile col-md-3"></div>
        </div>

    </section>

CSS

header {
    text-align: center;
}

#footerRights {
    padding-top: 5px;
    font-size: 1.5em;
}

.tile {
    height: 200px;
    background: red;
    margin: 20px;
}

.tileLong {
    height: 200px;
    background: blue;
    margin: 20px;
}

Answer 1

您的列加起来应该是 12 而不是 9。

使用此代码并将您的 CSS 从“边距”更改为填充

    <div class="row">
        <div class="tile col-md-4">
          <div class="inner"></div>
        </div>
        <div class="tileLong col-md-8">
           <div class="inner"></div>
        </div>
    </div>

    <div class="row">
        <div class="tile col-md-4"><div class="inner"></div></div>
        <div class="tile col-md-4"><div class="inner"></div></div>
        <div class="tile col-md-4"><div class="inner"></div></div>
    </div>

    <div class="row">
        <div class="tileLong col-md-8"><div class="inner"></div></div>
        <div class="tile col-md-4"><div class="inner"></div></div>
    </div>

这是您需要的 CSS:

header {
text-align: center;
}

 #footerRights {
padding-top: 5px;
font-size: 1.5em;
}

 .tile {
height: 200px;
padding: 20px;
}

.tileLong {
height: 200px;
padding: 20px;
}
.innerLong {
height: 150px;
background-color: blue;
}
.inner{
height: 150px;
background-color: red;
}