我首先创建了一个全宽的动画边框渐变，然后我想像在Adobe XD上所做的那样创建两个相邻的大容器，但是我不能增加容器的宽度。
我已经截图了一些：
Adobe XD参考
集装箱问题Pic
谢谢.
代码如下：
home.jsx
import React from 'react';
import './Home.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div className='fullwidth__gradient animated'>
<div className='row'>
<div className='col'>
<div className='leftside__container'>TEST</div>
</div>
<div className='col'>
<div className='rightside__container'>TEST</div>
</div>
</div>
</div>
);
}
export default App;
home.css
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}
null
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="fullwidth__gradient animated">
<div class="row">
<div class="col">
<div class="leftside__container">TEST</div>
</div>
<div class="col">
<div class="rightside__container">TEST</div>
</div>
</div>
</div>null
它来自.fullwidth__gradient中的显示：flex；。将W-100添加到row类旁边，它将完成作业。之后，可以使用p0删除col的填充
null
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="fullwidth__gradient animated container-fluid">
<div class="row w-100">
<div class="col">
<div class="leftside__container">TEST</div>
</div>
<div class="col">
<div class="rightside__container">TEST</div>
</div>
</div>
</div>
将bootstrap的flex-fill类添加到您的行中，并在行的父行上添加一个container类，似乎会有所帮助。行应该始终位于容器内，因为它们有负边距以匹配容器中的填充。
null
.fullwidth__gradient {
height: 100vh;
width: 100%;
border: 10px solid transparent;
text-transform: uppercase;
font-family: 'Open Sans', 'Source Sans Pro', Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.animated {
background-image: linear-gradient(rgb(26, 25, 29), rgb(26, 25, 29)),
linear-gradient(
180deg,
rgb(12, 154, 236),
rgb(77, 0, 128) 50%,
rgb(241, 171, 19)
);
background-repeat: no-repeat;
background-size: 100% 100%, 100% 200%;
background-position: 0 0, 0 100%;
background-origin: padding-box, border-box;
animation: highlight 2s infinite alternate;
}
@keyframes highlight {
100% {
background-position: 0 0, 0 0;
}
}
.leftside__container, .rightside__container {
height: 85vh;
width: 100%;
}
.leftside__container {
background-color: rosybrown;
}
.rightside__container {
background-color: royalblue;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid fullwidth__gradient animated">
<div class="row flex-fill">
<div class="col">
<div class="leftside__container">TEST</div>
</div>
<div class="col">
<div class="rightside__container">TEST</div>
</div>
</div>
</div>