Карты идут с полем справа

Question

Я пытаюсь отобразить три карты в сетке.Носитель карты имеет максимальную ширину 345 пикселей, но из-за этого карта получает много правого края.Стиль не выглядит хорошо в сетке.Кто-нибудь знает, как я могу избавиться от наценки?

У меня есть пример, сделанный в песочнице: https://codesandbox.io/s/6451nx4ypr

Answer 1

Если вы ожидаете, что ширина будет определена и должна появиться жидкость на экране при увеличении ширины экрана, как показано в этой кодовой ссылке ссылка.И это будет иметь ширину по умолчанию, равную 4, и не будет иметь собственного стиля для определения ширины, которая будет считаться отзывчивой шириной.

Answer 2

Я не знаю, работает ли он по-другому в React, но в Angular я просто применяю классы к тому, что мне нужно, чтобы изменить стиль, и это, кажется, требует.

Если у вас есть объекты в другом контейнере, убедитесь, что он не применяет некоторый запас / пространство (например, гибкий контейнер или что-то в этом роде).Примените что-нибудь к элементам контейнера, чтобы избавиться от всего этого.

Простой пример, это убирает все отступы и поля и оказывает предсказуемый эффект на фон (я только что попробовал это в проекте, он работает как положено):

mat-card {
  margin: 0;
  padding: 0px;
  background-color: grey;
}

mat-card-content {
  margin: 0;
  padding: 0px;
  background-color: red;
}

Answer 3

Если вы знакомы с начальной загрузкой, есть эта функция, называемая смещением сетки.К сожалению, это все еще не особенность Material-UI.

Итак, вы можете удалить максимальную ширину с ваших карт.Затем добавьте пустую сетку по сторонам, чтобы создать смещение.

Answer 4

Проблема с сеткой.Карта имеет максимальный размер, но сетка больше.Это оставляет дополнительное пространство.Если вы посмотрите в отладчике, поле для изменения отсутствует.

Вы можете попробовать следующее:

const styles = {
  card: {
    maxWidth: 345
  },
  gridFour: {
    maxWidth: 345
  },
  media: {
    // ⚠️ object-fit is not supported by IE11.
    objectFit: "cover",
  }
};

И изменить класс сетки на:

<Grid item sm={4} className={classes.gridFour}>

Песочница: https://codesandbox.io/embed/k3k2m35mz5

Вы также можете центрировать карты в Grid:

const styles = {
  card: {
    maxWidth: 345,
    margin: 'auto'
  },
  gridFour: {
    align: 'center'
  },
  media: {
    // ⚠️ object-fit is not supported by IE11.
    objectFit: "cover"
  }
};