Взгляните пожалуйста на верстку страницы http://vtasks.my-demo-apps.tk
=> Menu "events"
Я делаю с помощью списков (vue/cli 4 / Bootstrap 4.3 /flexbox) данные в 2 колонки и
проблема в том в тексте пробелы между лейблом и данными не отображаются: https://prnt.sc/q89s1i
Верстка :
<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>
Я делал верстку с помощью классов row_content_left_aligned и column_content_left_aligned
и единственный способ я нашел это у первого убрать display:flex - но тогда вертска совсем не работает...
А как правильно ?
Спасибо!
