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

从

更改您的课程

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

到

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

Bootstrap的默认列类为“ col”

Answer 2

如果您使用的是Bootstrap 4或更高版本，并且希望各列之间的间距相等，则在行 div下方，将每列div的类定义为 class =“ col”

它将在各列之间平均分配行空间 https://getbootstrap.com/docs/4.0/layout/grid/

解决方案将是下面给出的代码。

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<section class="container">
	    <div class="row">
	        <figure class="col-sm-6">
	            <p>floor plan</p>
	            <img src="floorplan.jpg">
	        </figure>
	        <figure class="col-sm-6">
	            <p>kitchen</p>
	            <img src="kitchen.jpg">
	        </figure>
	    </div>
	    <div class="row">
	        <figure class="col-sm-6">
	            <p>outdoor bath</p>
	            <img src="outdoorbath.jpg">
	        </figure>
	        <figure class="col-sm-6">
	            <p>bedrooms</p>
	            <img src="bedroom.jpg">
	        </figure>
	    </div>
	</section>

为什么这些图像彼此重叠而不是成行出现？ [HTML] [CSS] [引导程序]

2 个答案: