Как по-разному выровнять содержимое для хз и мд в сетке пользовательского интерфейса - PullRequest
Новая
       27

Как по-разному выровнять содержимое для хз и мд в сетке пользовательского интерфейса

0 голосов
/ 12 апреля 2019

Я использую компонент материала Grid для создания адаптивного макета сетки.И я хочу выровнять контент внутри сетки в зависимости от размера экрана - alignt влево для xs и выровнять вправо для md.Как мне это сделать?

Я использовал точки останова xs и md, чтобы разделить сетку в зависимости от размера экрана.Использовано материал-UI-сетки док.В документации также упоминается свойство, называемое align-items-xs-flex-start.Поэтому я дал align-items-xs-flex-start и align-items-md-flex-end в качестве реквизита для компонента Grid, чтобы увидеть, выравнивается ли содержимое по левому краю в xs и вправо в md.Но это не сработало.

Пример кода. 

<Grid>
  <Grid xs={12} md={7}>
    Hi there!
  </Grid>
  <Grid xs={12} md={5}>
    John Doe!
  </Grid>
</Grid>

На экране среднего размера я хочу, чтобы Джон Доу был выровнен вправо.На маленьком экране я хочу, чтобы Джон Доу перешел на следующую строку и выровнялся влево.Когда я попытался использовать align-items-xs-flex-start и align-items-md-flex-end, он все равно выровнялся по левому краю в обоих случаях.

...