javascript - 投资组合页面 --- 如何向下移动到下一行

Question

<div class= "pageThree container-fluid">
  <div class= "row">
    <div class= "col-md-12" id= "protxt">   
      <h1>Projects</h1>
      <h3>Work in progress</h3>
    </div>
    <div class= "col-md-4 container-fluid" id= "projects">
    <a href= "http://www.freecodecamp.com/map#">
    <img src= "https://s3.amazonaws.com/freecodecamp/wide-social-banner.png"     class= "img-responsive">
    </a>  
    </div>
    <div class= "col-md-4 container-fluid" id= "projects">
    <a href= "http://i.imgur.com/dLx8nrg.jpg">
    <img src= "http://i.imgur.com/dLx8nrg.jpg" class= "img-responsive">
    </a>   
    </div> 
    <div class= "col-md-4 container-fluid" id= "projects">
    <a href= "http://www.epicodus.com/">
    <img src= "http://static1.squarespace.com/static/5524448ee4b0d6f6b83ab9e2/t/55244514e4b08a    d5c0f51a01/1450291270689/?format=1500w" class= "img-responsive">
    </a>   
    </div> 

  </div>
</div>  

我试图通过像第一行一样在第二行中包含三个元素来完成我投资组合的这一部分，因此我将总共有六个“元素”，每行三个。这可能非常简单，但我一直在尝试各种事情，但似乎无法弄清楚。

我的另一个目前有点可选的问题是如何使所有图像链接的大小相同？我早些时候在搞乱这个并取得了一点成功，但我最终无法在重新调整大小后再次使图像居中，这导致一切都向左移动。

我的 CSS:

#projects {
  margin-top: 70px;
}

到目前为止，这是完整的 CodePen: http://codepen.io/mikerand/pen/QjRVYP

谢谢大家

Answer 1

一行中的列总数应该加起来为 12。这里有两组这样的列。一个全 Angular col-md-12 和三个 col-md-4。首先，将这两个放在不同的行中。然后添加包含三个 col-md-4 的另一行。

<div class= "pageThree container-fluid">
    <div class= "row">
        <div class= "col-md-12" id= "protxt">   
            <h1>Projects</h1>
            <h3>Work in progress</h3>
        </div>
    </div>
    <div class= "row">
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://www.freecodecamp.com/map#">
                <img src= "https://s3.amazonaws.com/freecodecamp/wide-social-banner.png"     class= "img-responsive">
            </a>
        </div>
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://i.imgur.com/dLx8nrg.jpg">
                <img src= "http://i.imgur.com/dLx8nrg.jpg" class= "img-responsive">
            </a>
        </div>
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://www.epicodus.com/">
                <img src= "http://static1.squarespace.com/static/5524448ee4b0d6f6b83ab9e2/t/55244514e4b08a    d5c0f51a01/1450291270689/?format=1500w" class= "img-responsive">
            </a>
        </div>
    </div>
    <div class= "row">
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://www.freecodecamp.com/map#">
                <img src= "https://s3.amazonaws.com/freecodecamp/wide-social-banner.png"     class= "img-responsive">
            </a>
        </div>
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://i.imgur.com/dLx8nrg.jpg">
                <img src= "http://i.imgur.com/dLx8nrg.jpg" class= "img-responsive">
            </a>
        </div>
        <div class= "col-md-4 container-fluid" id= "projects">
            <a href= "http://www.epicodus.com/">
                <img src= "http://static1.squarespace.com/static/5524448ee4b0d6f6b83ab9e2/t/55244514e4b08a    d5c0f51a01/1450291270689/?format=1500w" class= "img-responsive">
            </a>
        </div>
    </div>
</div>