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