Почему эти изображения появляются друг над другом, а не рядами? [HTML] [CSS] [Bootstrap] - PullRequest
Новая
       1

Почему эти изображения появляются друг над другом, а не рядами? [HTML] [CSS] [Bootstrap]

0 голосов
/ 12 сентября 2018

Я использую сетку 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>

Но они появляются друг на друге, как вы можете видеть при запуске фрагмента кода.Почему это так?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

, если вы используете загрузчик 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>
0 голосов
/ 12 сентября 2018

Измени свой класс с 

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

до 

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

Класс столбца Bootstrap по умолчанию - "col"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...