我的基本要求是使第2列具有50％的红色（左）和50％的白色（右），左列具有文本，右列具有图像。在较大到常规屏幕上，我的解决方案都可以很好地工作。使用引导程序4，自然地，第2列将从顶部到底部从一侧到另一侧。由于我使用“线性渐变”制作背景颜色，因此我进行了快速媒体查询，并将颜色设为top和bottom。
问题是，我必须总是弄乱/写不同的媒体查询，并且一个屏幕大小总是这样破裂
我编写了多个媒体查询，并对图像列的颜色％和最大高度进行了调整。看来我从根本上做错了事。有更好的自举解决方案吗？还是在所有屏幕上都可以使用的更好的CSS？
.app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
background: #d4272e;
}
.app-headline .img-content-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="pt-4 pb-4">
<h1>test</h1>
</div>
<section class="app-headline border">
<div class="container">
<div class="row py-5 text-white">
<div></div>
<div class="col-lg-6 pb-4 text-content-left">
<div class="text-content-left-texts">
<div class="inner-push-left">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 img-content-right align-self-center">
<img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>
<!--
<section class="product-promotion-display border">
<div class="">
<div class="row no-gutters d-flex justify-content-center text-white">
<div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
<div class="text-content-left-texts p-5 ">
<div class="inner-push-left offset-lg-3">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
<img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
</div>
</div>
</div>
</section> -->最佳答案
您需要从媒体查询中删除以下内容，并且可以尝试使用伪元素进行着色以创建溢出并隐藏白色部分：
.app-headline .text-content-left {
background: #d4272e;
}
完整代码：
.app-headline {
background: linear-gradient(to left, #fff 50%, #d4272e 50%);
overflow:hidden;
}
@media screen and (max-width: 992px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 52.2%, #fff 50%);
}
.app-headline .text-content-left {
position:relative;
z-index:0;
}
.app-headline .text-content-left::before {
content:"";
position:absolute;
top:0;
left:-50vw;
right:-50vw;
bottom:0;
z-index:-1;
background: #d4272e;
}
.app-headline .img-content-right {
background: #fff;
max-height: 24rem;
}
}
@media screen and (max-width: 768px) {
.app-headline {
background: linear-gradient(to bottom, #d4272e 59.9%, #fff 50%);
}
.app-headline .img-content-right {
background: #fff;
max-height: 17rem;
}
}
@media (min-width: 768px) and (max-width: 768px) {}<html>
<head>
<title>Products slider</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
</head>
<body>
<div class="pt-4 pb-4">
<h1>test</h1>
</div>
<section class="app-headline border">
<div class="container">
<div class="row py-5 text-white">
<div></div>
<div class="col-lg-6 pb-4 text-content-left">
<div class="text-content-left-texts">
<div class="inner-push-left">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2 col-sm-10 pl-0">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 img-content-right align-self-center">
<img class="content-right-image img-fluid" src="https://www.dropbox.com/s/i2cbe0ymwywya5f/app.png?dl=1" alt="there was an image">
</div>
</div>
</div>
</section>
<script type="text/javascript">
</script>
</body>
</html>
<!--
<section class="product-promotion-display border">
<div class="">
<div class="row no-gutters d-flex justify-content-center text-white">
<div class="col-lg-6 text-content-left d-flex justify-content-center align-items-center pb-4">
<div class="text-content-left-texts p-5 ">
<div class="inner-push-left offset-lg-3">
<h1 class="pb-4">H2 Apps Headline Here</h1>
<P class="pb-2">Modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, laboriosam,
nisi ut aliquid ex ea commodi conaliquid sequatur incidunt ut
labore et dolore magnam. </P>
<h5 class="pb-1">Features / Benefits</h5>
<ul class="pl-3 border border-top-0 border-left-0 border-right-0 pb-5">
<li>Modi tempora incidunt ut labore et dolore</li>
<li>Amagnam aliquam quaerat voluptatem</li>
<li>Ut enim ad minima veniam, laboriosa</li>
</ul>
<div class="d-flex justify-content-between mt-4">
<div class="pt-1">
<h3>Get The App</h3>
</div>
<div class="">
<div class="pt-0 ">
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a>
<a href="#">
<img src="https://www.dropbox.com/s/6m9hg1krramk5fa/Apple-store.png?dl=1" alt="" class="img-fluid pr-3">
</a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 d-flex justify-content-center align-items-center img-content-right">
<img class="content-right-image img-fluid" src="./images/toolbox.png" alt="there was an image">
</div>
</div>
</div>
</section> -->关于twitter-bootstrap - CSS线性梯度左右50％移动顶部和底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53842268/