如何编码两个彩色的全角标题？

Question

我正在编写新网站。如何编码这种布局？我需要一个全角标题，但一侧是渐变色（4列），另一侧是白色（8列）。 布局：https://i.imgur.com/d8zzqMj.png

我可以使用flexbox，但是不能在其中放入引导网格。

Answer 1

<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%
  );

太可惜了

Answer 2

您已经在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>