使用 react 和 react-bootstrap，当 window 变小时，阻止组件移动到下一行

Question

忘记这违背了 bootstrap 的目的，是否可以修复行，以便在 windows 变小时组件不会移动到下一行？这将确保所有组件都位于同一行，并且如果该行的内容超过屏幕宽度，则浏览器上将出现滚动条。我想实现这种行为而不必使用固定的 px 宽度。

一些测试代码：

App.js

import './App.css';
import { Image } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <div className="Test1">
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
      </div>
      <div className="Test2">
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
      </div>
    </div>
  );
}

export default App;

App.css

.Test1 {
  background-color: blue;
  width: 1500px;
}

.Test2 {
  background-color: red;
  width: "100%";
}

目标是让 <div className="Test2"> 的行为与 <div className="Test1"> 的布局和行为相匹配，而无需 使用固定的 px 宽度.

我没有提供所有可运行的代码，只提供了重要的代码。结果：

This image shows the result of the code above. Note that the first row is fixed. To see the entire row, you'll have to scroll in the browser horizontally. The second row adapts to the size of the window.

Answer 1

您可以在不想重新排列的特定容器上设置 min-width。你也可以用flex或者grid来达到同样的效果。

Answer 2

坦率地说，不需要任何自定义 CSS。 Bootstrap 可以为您搞定。只需使用其 d-flex class:

function App() {
  return (
    <div className="App">
      <div className="d-flex">
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
        <Image src='test1.jfif' />
      </div>
      <div className="d-flex">
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
        <Image src='test2.jfif' />
      </div>
    </div>
  );
}

沙盒：https://codesandbox.io/s/crazy-snyder-lp0lc?file=/src/App.js:180-186

使用 react 和 react-bootstrap，当 window 变小时，阻止组件移动到下一行

Using react and react-bootstrap, stop components from moving to next row when window is resized to be smaller

html

javascript

css

reactjs

react-bootstrap