自举列堆叠而不是在行中对齐

Question

我有以下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>

Answer 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的例子