Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать строку из нескольких span-ов в одну строку / 4 сообщений из 4, страница 1 из 1
25.09.2019, 15:26
    #39866932
mstdmstd
mstdmstd
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать строку из нескольких span-ов в одну строку
Всем привет
Откройте пожалуйста страничку http://hostels2.my-demo-apps.tk/forum/general-business
Есть вопросы с версткой на bootstrap4/vuejs2 странице:
1)Как сделать чтобы на широком экране таблица с данными была на весь экран и конпка “Post New Thread” не имела под ниже пустого места ?

2)Если уменьшить экран как можно сделать чтобы текст в правой колонке списка был в одну строку а не разбивался на 3 колонки :
https://prnt.sc/pars09

Это реализовано кодом :
Код: html
1.
2.
3.
4.
5.
			<div class="latest_post mb-4" v-show="latestPost">
				<span class="service_key_word">Latest:</span>&nbsp;
				<span><strong>{{ latestPost.title }}</strong>, by {{ singleForumRow.creator_name }},</span>
				<span class="date_ago_label">{{ last_modified_label(latestPost) }}</span>
			</div>


И это нормально работает на большом экране но не на экране меньше ...


Спасибо!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2019, 15:20
    #39867369
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать строку из нескольких span-ов в одну строку
mstdmstd,

тут смотрю, используется флекс. Бутстрап точно нужен?
Ради интереса, сохранил я себе локально этот сайт, таблицу растянуть получилось.
Добавьте в стили новый класс resp2 (имя можно поменять)
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
.resp2 td {
  white-space: nowrap;
  word-wrap: normal;
}

.resp2 td:nth-child(2) {
  width: 80%;
}

И в разметке добавьте этот resp2 в таблицу
Код: html
1.
<table class="table listing_content_table table-striped text-primary table-responsive resp2">


Результат: https://prnt.sc/pb8tc2


Если в колонке будет слишком много текста, то white-space: nowrap; растянет таблицу более чем на 100%. Поэтому для небольших экранов запретим перенос только у последней колонки:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
@media screen and (max-width:900px) {
  .resp2 td {
    white-space: normal;
   }

  .resp2 td:last-child {
    white-space: nowrap;
    word-wrap: normal;
  }
}


Как-то так: https://prnt.sc/pb9dk0
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2019, 15:39
    #39867385
mstdmstd
mstdmstd
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать строку из нескольких span-ов в одну строку
Спасибо 1) получилось. А по пункту 2) как исправить ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.09.2019, 16:14
    #39867417
SQLPowerUser
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Сделать строку из нескольких span-ов в одну строку
mstdmstd,

мой код, где @media screen этои есть вариант 2  
Текст переносится везде, кроме последней ячейки. На скриншоте эмуляция экрана 900х400. Я пробовал другие размеры, но там шрифт, padding/margin надо уменьшать...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Сделать строку из нескольких span-ов в одну строку / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 476ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443653]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 154ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 43ms
get tp. blocked users:
 1ms
others: 231ms
total:  476ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]