Блог

Главная - Вопросы по программированию - Как я могу сделать так, чтобы мои загрузочные 4 столбца заполняли всю ширину строки?

Как я могу сделать так, чтобы мои загрузочные 4 столбца заполняли всю ширину строки?

#html #css #reactjs #bootstrap-4 #containers

Вопрос:

Сначала я создал анимированный градиент границы во всю ширину, затем я хотел бы создать два больших контейнера рядом друг с другом, как я сделал в 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>

Ответ №1:

Это исходит от вашего display:flex; .fullwidth__gradient внутреннего . Добавьте w-100 рядом с вашим row классом, и это сделает работу. После того, как вы сможете удалить обивку col с p-0

ДЕМОНСТРАЦИЯ:

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

Ответ №2:

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>
Метки: ,