Сетка разваливается после того, как я даю поля или отступы

Я использую систему bootstrap-grid с Material UI, все отлично работает, единственная проблема заключается в том, что система сетки не сохраняет место в слотах после любого заполнения или поля, и вместо этого элементы переходят на следующую строку или строку, когда есть недостаточно места
Вот пример
Как вы можете видеть в примере, каждая кнопка имеет размер сетки 3, что означает, что в каждой строке должно быть 4 кнопки, но из-за небольшого отступа и поля теперь есть 3 кнопки в каждой строке.
Я ожидаю, что элементы автоматически уменьшатся в ширине, когда применяются поля и отступы, вместо того, чтобы переходить к следующей строке или строке, как я могу добиться такого?
Спасибо.


reactjs material-ui css bootstrap-grid
person Ali Ahmadi    schedule 05.08.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Не используйте классы начальной загрузки на вашей кнопке. Оберните кнопку внутри div следующим образом:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

Теперь вам нужно только изменить стиль кнопки (удалить/изменить это):

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

Если вы хотите, вы можете добавить отступ/маржу к своей кнопке. НИКОГДА не добавляйте отступы/отступы к таким классам, как .row или .col-*

person Tim Gerhard    schedule 05.08.2019
comment
Это работает отлично, теперь понятно, почему в некоторых местах моей программы этой проблемы не возникало, поэтому я всегда должен использовать div с col и использовать отступы и поля в компонентах, спасибо !! - person Ali Ahmadi; 05.08.2019
comment
Я просто рефакторил свой код, чтобы убедиться, что упомянутые вами правила применяются, и я заметил, что в одной части я задавал Select размер сетки класса col-md-12, а этот Select находился внутри div с фактическим размером сетки, например col-md-3 , теперь причина, по которой я указал размер 12, заключается в том, что я хочу, чтобы Select был в полном размере !!, я попытался заменить его шириной: 100% в стиле, но это не работает, так что это нормально, используя размер сетки 12, чтобы сделать компонент полноразмерным? Разве вы не говорили, что этот класс сетки должен быть только для divs? - person Ali Ahmadi; 05.08.2019
comment
Ширина: 100% должно работать. Я не мог представить, почему бы и нет. Вероятно, что-то не так с вашим css, но я бы использовал col-* только в качестве обертки - person Tim Gerhard; 05.08.2019

arrow_upward
1
arrow_downward

Вы можете обернуть его в Div

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <Div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button}
      >
        Default
      </Button></Div>
    );
  }

вам нужно импортировать Div перед его использованием.

import Div from "@material-ui/core/Grid";

https://codesandbox.io/s/bootstrap-grid-testcase-efi4u

person Ravi    schedule 05.08.2019
comment
Ваш не работает как надо, когда я изменяю размер окна и увеличиваю его, более 4 кнопок падают в один ряд - person Ali Ahmadi; 05.08.2019
comment
О, извините, я не против, да, обновленный код работает отлично, спасибо! Я рассмотрю это как альтернативное решение, кстати, есть ли какие-то преимущества в этом импортированном Div и обычном div? - person Ali Ahmadi; 05.08.2019
comment
Нет. точно так же, но Div из компонента будет иметь больше преимуществ. - person Ravi; 05.08.2019