如何讓我的 Bootstrap 4 列填滿整個行寬？

Question

我首先創建了一個全寬動畫邊框漸變，然后我想像在 Adobe XD 上那樣創建兩個相鄰的大容器，但我無法增加容器的寬度。

我截取了一些截圖：

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>

Answer 1

將 Bootstrap 的flex-fill class 添加到您的行並在父行上添加容器 class 似乎有幫助。 行應始終位於容器內，因為它們具有負邊距以匹配容器中的填充。

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

Answer 2

它來自你的display:flex; 在.fullwidth__gradient 。 在您的row class 旁邊添加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>