Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap инпуты вылезают за пределы рамки при уменьшении окна / 4 сообщений из 4, страница 1 из 1
10.04.2014, 11:11
    #38610877
webslon
webslon
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
Сделал в таблице. Лучше конечно обойтись без нее. Мне главное чтобы 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
| Ответить | Цитировать | Написать  
11.04.2014, 09:17
    #38611996
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
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, 22:16
    #38612901
webslon
webslon
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
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
| Ответить | Цитировать | Написать  
04.09.2014, 02:24
    #38736965
alexFAST
alexFAST
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
bootstrap инпуты вылезают за пределы рамки при уменьшении окна
Лучше тег table не использовать. Посмотри эти уроки, там все подробно рассматривается. А вообще bootstrap очень хороший фреймворк.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / bootstrap инпуты вылезают за пределы рамки при уменьшении окна / 4 сообщений из 4, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 385ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1446751]:
 0ms
get settings:
 6ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 38ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 67ms
get tp. blocked users:
 2ms
others: 232ms
total:  385ms
x
x
Закрыть


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