Как сделать размер столбцов сетки, чтобы содержимое подходило автоматически без переноса - PullRequest
Новая
       46

Как сделать размер столбцов сетки, чтобы содержимое подходило автоматически без переноса

0 голосов
/ 19 сентября 2019

Я хочу сделать строку, в которой два элемента в основном слева и один справа.Я использую Grid в сегменте, чтобы сделать аранжировку.Тем не менее, элементы Grid.Column заставляют текст переноситься, и я не могу найти в документах Semantic UI React ничего такого, что препятствует переносу, кроме принудительной ширины, используя что-то вроде width={2}, что я не хочу делать, потому чтоэто создает дополнительный пробел.

Без чего-либо.Обратите внимание на перенос текста (чего я не хочу).enter image description here

Использование width={2} и width={4} на обернутых столбцах, что лучше, но имеет слишком много пустого пространства - я просто хочу, чтобы ширина столбца была размером стекст и без переноса.Тег Received должен быть ближе к Car 1, а дата должна быть полностью выровнена по правому краю.

enter image description here

Вот код (с использованиемвынужденная ширина): 

<Segment>
  <Grid>
    <Grid.Column width={2}>
      <Header as='h3'>Car {data.id}</Header>
    </Grid.Column>
    <Grid.Column>
      {statusLabelBuilder(data.status)}
    </Grid.Column>
    <Grid.Column width={4} floated='right'>
      Date of Service: {data.date_of_service}
    </Grid.Column>
  </Grid>
</Segment>
...