ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
11 сообщений из 11, страница 1 из 1
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37836790
mesier
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mesier
Участник
Есть форма со строкой ввода телефонного номера.
Использую инпут класс от Bootstrap:
Код: html
1.
2.
3.
<div class="input-prepend">
  <span class="add-on">+7</span><input class="span2" id="prependedInput" type="text" style="float:right;" />
</div>


Так вот, должен бы красиво выглядеть:
 

Но при сворачивании окна браузера до определенного размера (на вскидку ~1000 пикселов в ширину), красивый input-prepend разрывается на две линии:
 

Нашел в интернетах совет пофиксить с помощью style="float:right;" для input-а, но что-то не помогло.. ((
Точнее помогло частично: при дальнейшем сворачивании окна, в определенный момент (подозреваю что с ширины 768 пикселов - именно с такого значение bootstrap начинает отображать разметку как для мобильных устройств), мой красивый инпут переходит на следующую "строку" полностью.
Есть ещё идеи как пофиксить?
...
Рейтинг: 0 / 0
13.06.2012, 18:16:23
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37836827
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mesierЕсть ещё идеи как пофиксить?
Нужно не "фиксить", а правильно сверстать.
Твой "красивый инпут" должен иметь некие ограничения по ширине. Да и по огрызку твоего "примера" ничего больше не скажешь...
...
Рейтинг: 0 / 0
13.06.2012, 19:00:32
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37837213
mesier
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mesier
Участник
input class="span2" - это и есть ограничение по ширине.
...
Рейтинг: 0 / 0
14.06.2012, 06:39:47
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37837273
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mesierinput class="span2" - это и есть ограничение по ширине.
Потопил!
...
Рейтинг: 0 / 0
14.06.2012, 08:29:00
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37838234
mesier
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mesier
Участник
См.:
Код: html
1.
input.span2, textarea.span2, .uneditable-input.span2{width:130px;}


Что-то не так с шириной инпута?.
...
Рейтинг: 0 / 0
14.06.2012, 16:48:12
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37838599
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mesier , ты умеешь делать тестовые примеры? Таки пора начинать...
...
Рейтинг: 0 / 0
14.06.2012, 21:09:16
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37838601
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mesierЧто-то не так с шириной инпута?.
Таки я не про его ширину писал...
Я писал про
Код: html
1.
2.
<div class="input-prepend">
</div>


Это у него должно быть ограничение по ширине.
...
Рейтинг: 0 / 0
14.06.2012, 21:11:05
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37839347
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
или у его родителя.
...
Рейтинг: 0 / 0
15.06.2012, 12:24:41
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37839501
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
mage.lanили у его родителя.
Или у родителя того родителя...
...
Рейтинг: 0 / 0
15.06.2012, 13:26:27
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37849509
private
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
private
Участник
У тебя наверно бутстраповские респосив стили используются, он меняет ширину сетки и при маленьком размере вылезает этот косяк.
Можно попробовать отключить эти стили и использовать обычные, или поставить минимальную ширину на элементе, но вообше, такое явное указание ширины может нарушить бутстраповские респонсив-стили.
...
Рейтинг: 0 / 0
22.06.2012, 02:45:33
| Ответить | Цитировать | Написать  
Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
    #37849568
mesier
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mesier
Участник
privateУ тебя наверно бутстраповские респосив стили используются, он меняет ширину сетки и при маленьком размере вылезает этот косяк. Можно попробовать отключить эти стили и использовать обычные, или поставить минимальную ширину на элементе, но вообше, такое явное указание ширины может нарушить бутстраповские респонсив-стили.
Спасибо за ответ!
Да, bootstrap-responsive велючен..
Впринципе, добавление элементу style="float:right;" и увеличение размера родительского контейнера на 1 "клетку" - помогает. Но! Очень важно, чтобы больше никаких вручную установленных стилей не было. Ни у элемента, ни у его контейнеров. Иначе разъезжается.
Проблема вроде пофиксена, но, похоже, сырой ещё бутстрап, ох сырой!..
...
Рейтинг: 0 / 0
22.06.2012, 06:52:30
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Bootstrap: input-prepend "разрывается" на две линии при изменении размеров окна браузера
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=164&tid=1449664]:
 0ms
get settings:
 11ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 64ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 46ms
get tp. blocked users:
 1ms
others: 229ms
total:  396ms
созд. / загр.: 396ms
x
x
Закрыть


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