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

一行中cols的总数应该最多为12个。这里有两组cols。全宽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>

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

1 个答案: