HTML5 макет с начальной загрузкой - PullRequest
Новая
       15

HTML5 макет с начальной загрузкой

0 голосов
/ 20 февраля 2019

Мне нужно закодировать макет как это с помощью Bootstrap 3.x

enter image description here

Но я не знаю, как создать раздел (вв этом случае основной и статьи) с несколькими размерами столбцов, без ошибки разметки, связанной с закрытием элементов.

Следующий код является синтаксически правильным, но не соответствует макету (col-md-4 в новом ряду) 

  <body>
  <header>
  	<!-- menu -->
  </header>

  	<div class="container">
	  <main>
		<article>
			<div class="row">
	  			<div class="col-md-12">
			 		<h1>Hello, world!</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-md-8">
				  	<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Etc., etc.</p>
				</div>
			</div>
		</article>
	  </main>
	  	<div class="row">
			<aside class="col-md-4">
			  		<p>Lorem ipsum</p>
			</aside>
		</div>

		<div class="row">
			<footer class="col-md-12">
	  			<p>Lorem ipsum</p>
	  		</footer>

	</div><!-- container -->
  	
  </body>
</html>

Что вы предлагаете?

Спасибо

1 Ответ

0 голосов
/ 21 февраля 2019

«Зеленая» колонка, .col-md-4 должна быть родственной «оранжевой» колонки .col-md-8 .Они должны иметь одного и того же .row родителя.Другими словами, они должны быть рядом друг с другом, чтобы разделы не ломались.Вот как бы я это сделал: 

<header>
 <div class="container">
  <div class="row">
   <div class="col-md-12">header</div>
  </div>
 </div>
</header>

<main>
 <div class="container">
  <div class="row">
    <div class="col-md-12">orange section</div>
  </div>

  <div class="row">
    <div class="col-md-12">orange section</div>
    <div class="col-md-12">green section</div>
  </div>
 </div>
</main>

<footer>
 <div class="container">
  <div class="row">
    <div class="col-md-12">footer</div>
  </div>
 </div>
</footer>
...