问题：

我如何使我的引导4列填充整个行宽度？

陆伟

2023-03-14

我首先创建了一个全宽的动画边框渐变，然后我想像在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

共有2个答案

轩辕海

2023-03-14

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

端木高卓

2023-03-14

它来自.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;
}

html prettyprint-override"><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行内容器，两行有3列的类col-sm-4和col-md-4。两行每列都有1个图像。所有图像在300px宽时大小完全相同。顶部行显示准确，底部行浓缩了3列，并在右侧留下了大面积的宽阔空间。使用检查器时，顶部行列显示为col-md-4类，但底部行列显示为col-sm-4类。我不确定这是不是原因。我还应该提到，顶部行列在每个图像下面都有段落。当仅在1列中将完全相同的段落内容添加到
引导程序5：如何使列宽灵活，但仍然填充行？

使用Bootstrap 5，我如何使列根据其内容具有灵活的宽度，但所有列仍然填充行的全部宽度？如果我使用,那么列的宽度都是相同的。如果我使用，那么列就不会填充行的宽度。如有任何建议，将不胜感激。谢谢你。
如何用n个整数填充单行列表？

我想在一行中用n个整数填充一个列表，我试过了，但如何增加n的限制？
JavaFX-如何使用ColumnConstraints的缩放宽度和静态宽度将GridPane填充整个HBox？

我有问题填充我的整个自定义HBox与一个网格窗格，是动态创建的。HBox存在于ListView中，并且已经随ListView动态缩放，没有任何问题。问题是，我希望我的GridPane中的一些东西在用鼠标扩展窗口大小时可以缩放，但有些部分需要保持相同的大小。有两个按钮和一个填充标签需要保持相同的大小，这不是一个问题。我的模拟类总结了我正在做的事情：控制器： FXML文档：填充第一列中的标签，该
图像无法填充容器的整个宽度

我的图像滑块不是我想要的方式。除非我的浏览器窗口很小，否则图像不会填满容器的整个宽度。当我的窗口较大时，图像的右侧有一个空白，而不是图像填满整个宽度。这是我的代码：和CSS：
我如何让GridPane填充整个场景？（JavaFX SceneBuilder和Eclipse Luna）

我找到了这个答案，但它似乎已经过时了，或者不适合我的情况。我（和我班的其他同学）正在尝试调整网格窗格的大小，以填充整个场景。下面是它现在在SceneBuilder中的样子：如果你看不到图像：它只是一个3x3的GridPane（我的层次中唯一的元素）的图像，其周围是GridPane的剩余场景的“灰色空间”。这是我的主要代码：这是我的控制器代码：这是我的.fxml文件中的代码（在我们的类中，

我如何使我的引导4列填充整个行宽度？

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档