html - 如何更改 5 到 4 列并使它们在 HTML 中居中​​？

Question

我正在编辑 Bootstrap 响应模板以满足我的需要。我的 HTML/CSS 知识有限，我被困在这里:

我需要在第一行有 4 列(包含 4 个第一个联系人)，在第二行需要另外 3 列(包含其余 3 个联系人)。有什么建议吗？

P.S - 最后我需要它们都在页面中居中。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Five columns -->
<div class="row">
  <div class="span2 offset1">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-1.jpg" alt="">
    </div>
    <h3>Marta Silva</h3>
    <div class="job-position">CEO</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-2.jpg" alt="">
    </div>
    <h3>Eliana Neto</h3>
    <div class="job-position">CFO</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-3.jpg" alt="">
    </div>
    <h3>Carlos Martins </h3>
    <div class="job-position">Supervisor Operations</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-4.jpg" alt="">
    </div>
    <h3>Pedro Correia</h3>
    <div class="job-position">HR & Training</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-5.jpg" alt="">
    </div>
    <h3>Luis Vicente</h3>
    <div class="job-position">Iberia Supervisor</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-6.jpg" alt="">
    </div>
    <h3>Nuno Figueiredo</h3>
    <div class="job-position">U.K Supervisor</div>
  </div>
  <!-- ./span2 -->
  <div class="span2">
    <div class="teamalign">
      <img class="team-thumb img-circle" src="img/portrait-7.jpg" alt="">
    </div>
    <h3>Ana Veríssimo</h3>
    <div class="job-position">Benelux & Germany Supervisor</div>
  </div>
  <!-- ./span2 -->
</div>

Answer 1

是的，你可以这样使用:

• 将第一行元素包装在 .span3 中。
• 将第二行元素包装在 .span4 中。

使用全屏预览并亲眼看看。让我知道这是否是您想要的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css">
<div class="container">
  <!-- Five columns -->
  <div class="row">
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-1.jpg" alt=""> </div>
      <h3>Marta Silva</h3>
      <div class="job-position">CEO</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-2.jpg" alt=""> </div>
      <h3>Eliana Neto</h3>
      <div class="job-position">CFO</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-3.jpg" alt=""> </div>
      <h3>Carlos Martins </h3>
      <div class="job-position">Supervisor Operations</div>
    </div>
    <!-- ./span2 -->
    <div class="span3">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-4.jpg" alt=""> </div>
      <h3>Pedro Correia</h3>
      <div class="job-position">HR & Training</div>
    </div>
  </div>
  <div class="row">
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-5.jpg" alt=""> </div>
      <h3>Luis Vicente</h3>
      <div class="job-position">Iberia Supervisor</div>
    </div>
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-6.jpg" alt=""> </div>
      <h3>Nuno Figueiredo</h3>
      <div class="job-position">U.K Supervisor</div>
    </div>
    <!-- ./span2 -->
    <div class="span4">
      <div class="teamalign"> <img class="team-thumb img-circle" src="img/portrait-7.jpg" alt=""> </div>
      <h3>Ana Veríssimo</h3>
      <div class="job-position">Benelux & Germany Supervisor</div>
    </div>
    <!-- ./span2 -->
  </div>
</div>