bootstrap 列堆叠且未按行对齐

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 example

Answer 2

您的列位于 .row 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>

bootstrap 列堆叠且未按行对齐

bootstrap columns stacking and not aligning in row

html

css

twitter-bootstrap