html - 为什么这些图像不是成排地出现在彼此的顶部？ [HTML][CSS][ Bootstrap ]

Question

我正在使用 boostrap 的网格显示两行，每行有两张图片，如下所示:

<section class="container">
	    <div class="row">
	        <figure class="column-sm-6">
	            <p>floor plan</p>
	            <img src="floorplan.jpg">
	        </figure>
	        <figure class="column-sm-6">
	            <p>kitchen</p>
	            <img src="kitchen.jpg">
	        </figure>
	    </div>
	    <div class="row">
	        <figure class="column-sm-6">
	            <p>outdoor bath</p>
	            <img src="outdoorbath.jpg">
	        </figure>
	        <figure class="column-sm-6">
	            <p>bedrooms</p>
	            <img src="bedroom.jpg">
	        </figure>
	    </div>
	</section>

但正如您在运行代码片段时所看到的那样，它们相互重叠出现。为什么会这样？

Answer 1

改变你的类(class)

<div class="column-sm-6"> </div>

到

<div class="col-sm-6"> </div>

Bootstrap 的默认列类是“col”