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

时间:2015-01-13 17:11:57

标签: html css twitter-bootstrap

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

2 个答案:

答案 0 :(得分:5)

不要关闭你的内行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

答案 1 :(得分: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>