html - 如何让我的 Bootstrap 4 列填满整个行宽?
问题描述
我首先创建了一个全宽动画边框渐变,然后我想像在 Adobe XD 上那样创建两个相邻的大容器,但我无法增加容器的宽度。
我截取了一些截图:
谢谢你。
这是代码:
主页.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;
主页.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;
}
.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>
解决方案
将 Bootstrap 的flex-fill
类添加到您的行和父行上的容器类似乎有帮助。行应始终位于容器内,因为它们具有负边距以匹配容器中的填充。
.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>
推荐阅读
- javascript - 在 aws lambda 中连接到 mongo 时出错
- android - 构建android应用程序cordova时JDK版本错误
- django - 为什么建议使用不同的服务来托管 django 的静态文件(如 nginx 或 apache)?
- firebase - 使用 firebase 匿名用户保护 Flutter 应用程序
- javascript - 比较字符串与 GM_GetValue 不能正常工作
- python - 在通过 multipart/form-data 时有什么方法可以维护/获取文件的原始内容类型
- scala - 如何保留之前创建的分区,用于分组
- python - Python 中的 screen.fill() 命令不起作用
- powershell - Powershell Get-Item 无法在某些目录(例如 AppData)上运行,而 Get-ChildItem 可以
- ios - iOS 设备上的 Ionic CORS 问题,同时设置了正确的标头