Как закодировать два цветных заголовка полной ширины?

Question

Я кодирую новый сайт.Как закодировать этот макет?Мне нужен заголовок полной ширины, но одна сторона - градиент (4 столбца), а другая - белый (8 столбцов).Макет: https://i.imgur.com/d8zzqMj.png

Я мог бы использовать flexbox, но я не могу поместить в него сетку начальной загрузки.

Answer 1

Вы можете создать col-4 и col-8 в вашем header и применить фон по отдельности .Если вы примените градиент к заголовку без column, это создаст для вас проблему в разных разрешениях .Я создаю очень простой пример для вас, надеюсь, он вам поможет.Спасибо

.white-bg {
	background-color: #fff;
}
.gradient-bg {
	background-image: linear-gradient(red, yellow);
}

<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<header>
	<div class="row">
		<div class="col-4 gradient-bg">Gradient Background</div>
		<div class="col-8 white-bg">White Background</div>
	</div>
</header>

Answer 2

<div class="header"></div>

просто используйте линейный градиент, как этот

.header {
  background: linear-gradient(
   to right,
   #ff9e2c 0%,
   #ff9e2c 50%,
   #b6701e 50%,
   #b6701e 100%
  );
  height: 100%; //what height or width u want
  width: 100%;
}


</style>

использовать можно использовать как

  background: linear-gradient(
   to right,
   #ff9e2c 0%,
   #b6701e 50%,
   #b6701e 100%
  );

тоже, но изменение эффекта