ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap инпуты вылезают за пределы рамки при уменьшении окна
4 сообщений из 4, страница 1 из 1
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
    #38610877
webslon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
webslon
Гость
Сделал в таблице. Лучше конечно обойтись без нее. Мне главное чтобы label и input были на одной строке и отступы во всех строках были одинаковые. Сейчас это сделано, но при уменьшении размер, инпуты не хотят нормально изменять размер.
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
.user-settings-block {
	margin: 30px;
	padding: 10px;
	border: solid 1px #dddddd;
	resize: vertical;
}
.user-settings-label {
	float: left;
	margin: 10px 0;
	margin-right: 60px;
	font-family: inherit;
	font-weight: bold;
	line-height: 16px;
	color: inherit;
	text-rendering: optimizelegibility;
	font-size: 16px;
}


Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
<!DOCTYPE html>
<html>
	<head>
		<title>debug</title>
		<!-- Bootstrap -->
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="mystyle.css" rel="stylesheet">
	</head>
	
	<body>
		
		
		<div class="container-fluid">
			<div class="row-fluid">
				<!-- Список вопросов -->
				<div class="span9">
					
					<div class="user-settings-block">
						
								<table style="width:100%">
									<colgroup>
										<col span="1" style="">
										<col style="width:100%;">
									 </colgroup>
									<tr>
										<td>
											<label class="control-label user-settings-label" for="inputIcon">Заголовок</label>
										</td>
										<td>
											
												<div class="input-prepend">
													<span class="add-on"><i class="icon-pencil"></i></span>
													
													<input class="input-xxlarge" type="text" required>
												</div>	
											
										</td>
									</tr>
									<tr height="250">
										<td>
											<label class="control-label user-settings-label" for="inputIcon">Текст</label>
										</td>
										<td>
											<textarea id="textarea" maxlength="2000" style="width:82%; height:250px;"></textarea>
										</td>
									</tr>
									<tr>
										<td>
											<label class="control-label user-settings-label" for="inputIcon">Теги</label>
										</td>
										<td>
											
												<div class="input-prepend">
													<span class="add-on"><i class="icon-tags"></i></span>
													<input class="input-xxlarge" type="text">
												</div>	
											
										</td>
									</tr>
								</table>	
    				
					</div>		
				</div>
				<!-- Сайдбар -->
				<div class="span3">
					<!-- Блок тегов -->
					
				</div>


		<script src="jquery-1.8.3.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script>
		
		</script>	
		
	</body>
</html>
...
Рейтинг: 0 / 0
10.04.2014, 11:11
| Ответить | Цитировать | Написать  
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
    #38611996
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
webslonно при уменьшении размер, инпуты не хотят нормально изменять размер Как вариант, через position:absolute; и right:0;
 
При уменьшении размеров браузера, инпуты тоже уменьшаются
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<style>
input[type="text"]{
	margin:0;
	padding:0;
	border:none;
	outline:none;
	vertical-align:middle;
	height:100%;
	width:100%;
}
.container-fluid {
	padding:10px;
	border:1px solid #6F7273;
	height:100px;
	width:80%;
}
.container-fluid .DivRow {
	position:relative;
	margin-bottom:20px;
	width:100%;
}
.DivInput {
	padding:0;
	height:19px;
	overflow:hidden;
	border:1px solid #c0c0c0;
	position:absolute;
	top:-1px;
	left:80px;
	right:0;
}
</style>
<body>
<div class="container-fluid">
	<div class="DivRow">
		<label>
			<span>Заголовок:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
	<div class="DivRow">
		<label><span>Текст:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
	<div class="DivRow">
		<label>
			<span>Теги:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
</div> <!-- container-fluid" -->
</body>
</html>

...
Рейтинг: 0 / 0
11.04.2014, 09:17
| Ответить | Цитировать | Написать  
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
    #38612901
webslon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
webslon
Гость
user89webslonно при уменьшении размер, инпуты не хотят нормально изменять размер Как вариант, через position:absolute; и right:0;
 
При уменьшении размеров браузера, инпуты тоже уменьшаются
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<style>
input[type="text"]{
	margin:0;
	padding:0;
	border:none;
	outline:none;
	vertical-align:middle;
	height:100%;
	width:100%;
}
.container-fluid {
	padding:10px;
	border:1px solid #6F7273;
	height:100px;
	width:80%;
}
.container-fluid .DivRow {
	position:relative;
	margin-bottom:20px;
	width:100%;
}
.DivInput {
	padding:0;
	height:19px;
	overflow:hidden;
	border:1px solid #c0c0c0;
	position:absolute;
	top:-1px;
	left:80px;
	right:0;
}
</style>
<body>
<div class="container-fluid">
	<div class="DivRow">
		<label>
			<span>Заголовок:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
	<div class="DivRow">
		<label><span>Текст:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
	<div class="DivRow">
		<label>
			<span>Теги:</span>
			<div class="DivInput"> <input type="text"> </div>
		</label>
	</div>
</div> <!-- container-fluid" -->
</body>
</html>



Спасибо. Но готовые способы я и сам находил. Мне нужно именно с bootstrap стилями разобраться.
...
Рейтинг: 0 / 0
11.04.2014, 22:16
| Ответить | Цитировать | Написать  
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
    #38736965
alexFAST
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
alexFAST
Гость
Лучше тег table не использовать. Посмотри эти уроки, там все подробно рассматривается. А вообще bootstrap очень хороший фреймворк.
...
Рейтинг: 0 / 0
04.09.2014, 02:24
| Ответить | Цитировать | Написать  
4 сообщений из 4, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap инпуты вылезают за пределы рамки при уменьшении окна
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=91&tid=1446751]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 279ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 1ms
others: 234ms
total:  593ms
созд. / загр.: 593ms
x
x
Закрыть


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