Question

我无法正确对齐这些引导行。我已经摆弄宽度，边距和填充，我无法弄清楚问题。任何解决方案或建议都将非常感激。

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。

使用此代码并从＆＃39; margin＆＃39;更改您的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;
}

Answer 2

你应该用class = col-md- *包装div的内容，下面是一个例子并且正在使用fiddlw

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

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

fiddle

无法完美地对齐引导行

2 个答案: