Zapominając, że to pokonuje cel bootstrap, czy można naprawić wiersze, aby elementy nie były przeniesione do następnego rzędu, gdy okna są zmieniane mniejsze? Spowoduje to upewnienie się, że elementy wszystkie pozostają w tym samym wierszu, a jeśli zawartość wiersza przekracza szerokość ekranu, pojawi się pasek przewijania w przeglądarce. Chciałbym osiągnąć ten zachowanie bez konieczności używania stałych px szerokości.

Trochę kodu testowego:

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%";
}

Celem jest uzyskanie zachowania <div className="Test2">, aby dopasować układ i zachowanie <div className="Test1"> bez za pomocą stacjonarnej szerokości px.

Nie dostarczyłem wszystkiego zużytywanego kodu, tylko ważnego kodu. Wynik:

Ten obraz pokazuje wynik kodu powyżej. Zauważ, że pierwszy wiersz jest naprawiony. Aby zobaczyć cały wiersz, musisz przewinąć w przeglądarce poziomo. Drugi rząd dostosowuje się do rozmiaru okna.

2
PacoProgramming 25 marzec 2021, 04:10

2 odpowiedzi

Najlepsza odpowiedź

Szczerze mówiąc, nie ma potrzeby dla żadnych niestandardowych CSS. Bootstrap może sobie z tym poradzić. Wystarczy użyć jego D-Flex Klasa:

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>
  );
}

Sandbox: https://codesandbox.io /s/crazy-snyder-lp0lc?file=/src/app.js:180-186.

0
codemonkey 25 marzec 2021, 05:25

Możesz ustawić min-width na konkretnym pojemniku, którego nie chcesz zmieniać. Możesz także użyć flex lub siatki, aby uzyskać ten sam efekt.

0
Yong Pin 25 marzec 2021, 01:14