Взгляните пожалуйста на верстку страницы http://vtasks[dot]my-demo-apps[dot]tk
Далее клик на элементе меню “events”
Я делаю с помощью списков (vue/cli 4 / Bootstrap 4.3 /flexbox) данные в 2 колонки и
проблема в том в тексте пробелы между лейблом и данными не отображаются: https://prnt[dot]sc/q89s1i
Верстка :
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <ul class="column_content_left_aligned">
- <li class="p-3" v-if="nextEvent.task_name">
- <i :class="'i_link '+getHeaderIcon('task')" title="Event related task"></i>
- <router-link :to="{ name: 'taskDetails', params: { slug: nextEvent.task_slug } }" class="p-3 a_link" target="_blank">
- <strong>{{ nextEvent.task_name }}</strong>
- </router-link>
- </li>
- <li class="p-3">
- Starts at <strong>{{ momentDatetime(nextEvent.at_time, jsMomentDatetimeFormat) }}</strong>
- </li>
- <li class="p-3 row_content_left_aligned" style="display: flex;align-self: flex-start">
- <ul class="row_content_left_aligned">
- <li class="row_content_left_aligned">
- Duration <strong>{{ nextEvent.duration }}</strong> min
- </li>
- <li class="row_content_right_aligned">
- <strong>{{ getDictionaryLabel( nextEvent.access, eventAccessLabels ) }}</strong> access
- </li>
- </ul>
- </li>
- </ul>