引导列堆叠而不是在行中对齐答案

【问题标题】：bootstrap columns stacking and not aligning in row引导列堆叠而不是在行中对齐
【发布时间】：2015-01-14 01:15:17
【问题描述】：

我有以下 html 部分，我可以尝试包含三列。不幸的是，这些 div 只是在第一列中将一个堆叠在另一个下方，而不是制作三个单独的列。我曾尝试查看其他帖子，并花了一些时间尝试更改行和 div，但没有任何效果。

<section class="about" >
  <div class="container">
    <div class="row">
      <div class="col-md-12"><h3>ABOUT</h3></div>
    </div>

    <div class="row">
      <div class="col-md-4"> 
        <p class ="about-title">ABOUT ME</p>
        <div class ="about-info">
          <p>sample paragraph</p>
        </div>
      </div> 
    </div>

    <div class="row">
      <div class="col-md-4"> 
        <div>
          <img class="prof" src="css/img/prof.jpg">
        </div>
      </div>      
    </div>  

    <div class="row">
      <div class="col-md-4"> 
        <p>column three</p>
      </div>      
    </div> 
  </div>
</section>

【问题讨论】：

学习网格系统：一个.container或.container-fluid可以有多个.row类，每个类可以有.col-x-y的任意组合，其中x是xs, sm, md or lg和@ 987654328@ 是1 - 12，加起来就是12。

标签： html css twitter-bootstrap

【解决方案1】：

不要关闭你的内行 div。每次执行此操作时，都会创建一个新行。

<section class="about" >
  <div class="container">
    <div class="row">
      <div class="col-md-12"><h3>ABOUT</h3></div>
    </div>
    <div class="row">
      <div class="col-md-4"> 
        <p class ="about-title">ABOUT ME</p>
        <div class ="about-info">
          <p>sample paragraph</p>
        </div>
      </div> 
      <div class="col-md-4"> 
        <div>
          <img class="prof" src="css/img/prof.jpg">
        </div>
      </div>      
      <div class="col-md-4"> 
        <p>column three</p>
      </div>      
    </div> 
  </div>
</section>

bootply example

【讨论】：

【解决方案2】：

你的列在.row divs 中，它构成单独的行。尝试像这样删除它们

<section class="about" >
  <div class="container">
    <div class="row">
      <div class="col-md-12"><h3>ABOUT</h3></div>
    </div>

    <div class="row">
      <div class="col-md-4"> 
        <p class ="about-title">ABOUT ME</p>
        <div class ="about-info">
          <p>sample paragraph</p>
        </div>
      </div> 
      <div class="col-md-4"> 
        <div>
          <img class="prof" src="css/img/prof.jpg">
        </div>
      </div>      
      <div class="col-md-4"> 
        <p>column three</p>
      </div>      
    </div> 
  </div>
</section>

【讨论】：