PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
mstdmstd
Отправлено: 09 Декабря, 2019 - 23:17:51
Post Id


Частый гость


Покинул форум
Сообщений всего: 151
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Всем привет!

Взгляните пожалуйста на верстку страницы http://vtasks[dot]my-demo-apps[dot]tk
Далее клик на элементе меню “events”

Я делаю с помощью списков (vue/cli 4 / Bootstrap 4.3 /flexbox) данные в 2 колонки и
проблема в том в тексте пробелы между лейблом и данными не отображаются: https://prnt[dot]sc/q89s1i
Верстка :
CODE (html):
скопировать код в буфер обмена
  1.                 <ul class="column_content_left_aligned">
  2.                         <li class="p-3" v-if="nextEvent.task_name">
  3.                                 <i :class="'i_link '+getHeaderIcon('task')" title="Event related task"></i>
  4.                                 <router-link :to="{ name: 'taskDetails', params: { slug: nextEvent.task_slug }  }" class="p-3 a_link" target="_blank">
  5.                                         <strong>{{ nextEvent.task_name }}</strong>
  6.                                 </router-link>
  7.  
  8.                         </li>
  9.  
  10.                         <li class="p-3">
  11.                                 Starts at <strong>{{ momentDatetime(nextEvent.at_time, jsMomentDatetimeFormat) }}</strong>
  12.                         </li>
  13.                         <li class="p-3 row_content_left_aligned" style="display: flex;align-self: flex-start">
  14.                                 <ul class="row_content_left_aligned">
  15.                                         <li class="row_content_left_aligned">
  16.                                                 Duration <strong>{{ nextEvent.duration }}</strong> min
  17.                                         </li>
  18.  
  19.                                         <li class="row_content_right_aligned">
  20.                                                 <strong>{{ getDictionaryLabel( nextEvent.access, eventAccessLabels ) }}</strong>&nbsp;access
  21.  
  22.                                         </li>
  23.                                 </ul>
  24.                         </li>
  25.  
  26.                 </ul>
  27.  
  28.  

Я делал верстку с помощью классов row_content_left_aligned и column_content_left_aligned
и единственный способ я нашел это у первого убрать display:flex - но тогда вертска совсем не работает...

А как правильно ?

Спасибо!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB