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>

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

2 个答案: