如何让我的 Bootstrap 4 列填满整个行宽？

Question

我首先创建了一个全宽动画边框渐变，然后我想像在 Adob​​e XD 上那样创建两个相邻的大容器，但我无法增加容器的宽度。

我已经截了一些截图：

Adobe XD Reference

Containers Problem 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;

主页.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>

Answer 1

它来自.fullwidth__gradient 中的display:flex;。在您的 row 班级旁边添加 w-100 ，它将完成这项工作。在您可以使用p-0 删除col 的填充之后

演示：

.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>

Answer 2

将 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>