مشکل در طراحی Bootstrap و Scroll صفحات
من در بوت استرپ یک فرم و یک عنوان در بالای آن نوشته ام موقعی که صفحه کوچک می شود اسکرول نمایان و فرم از عنوان فاصله و به سمت راست حرکت می کند ولی در حالت عادی من آن را هم در وسط زیر عنوان طراحی کرده ام مشکل از چیست؟
3 پاسخ
1) ابتدا و انتهای کدتون تگ <htm> اضافی هست
2) <section class="container"> رو با <div class="container"> جایگزین کنید
3) سعی کنید به جای استفاده از تگ <br> از margin-top در css استفاده کنید
4) داخل form از کلاس col-xs-6 استفاده کردین که برای اندازه صفحه بسیار کوجک مناسب هست،به جای اون باید از col-md-6 استفاده کنید.در ضمن form رو باید داخل تگ div با کلاس col-md-6 قرار بدین.
5) برنامه نویس ها معمولا از تگ table فرار می کنن چون خاصیت responsive بودن سایت رو از بین می بره.مگر اینکه مجبور بشن،اون هم صرفا بعنوان یک جدول معمولی که شامل چندین کلمه است(اون هم جدول bootstrap).داخل table اینگونه نمی توان اطلاعاتی رو که شما قرار دادید،قرار داد.
6) در انتهای کد تگ اسکریپت استفاده کردین که اشتباهه.باید در تگ head اون رو قرار بدید.
7) لطفا نسبت به تگ هایی که باز می کنین دقت کنین که حتما اون ها رو ببندین.
اگه ممکن هست کدتون رو قرار بدین
<htm>
<!DOCTYPE html>
<html>
<head>
<style>
.header
{
color:White;
font-size:16px;
font-style:normal;
font-weight:bold;
}
#n3
{
position:absolute;
left:120px;
top:1px;
}
#n2
{
position:absolute;
top:1px;
left:70px;
}
#n1
{
position:absolute;
top:1px;
left:2px;
}
#big
{
background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSgpmHN__dLnv3DfdTUeNF6SiyDBEk68io6uj-YYDdc5pxPci7_);
position:absolute;
left:0;
right:0;
}
#titr
{
color:white;
font-size:40px;
font-weight:bold;
text-shadow:7px 7px 4px black;
}
#fild1
{
position:relative;
left:300px;
}
</style>
<title>dddddd</title>
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>
<section class="container">
<div class="table-responsive">
<table class="table" id="big" width="900" heght="700">
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="text-center text-lowercase" id="titr">fffffffffffffffff</p>
<form action="" method="post" name="home">
<div class="row">
<div class="col-xs-6">
<select class="form-control input-lg" id="fild1">
<option value="value 1" >2</option>
<option value="value 2">3</option>
<option value="value 3">4</option>
<option value="value 3">5</option>
<option value="value 3">6</option>
<option value="value 3">7</option>
<option value="value 3">8</option>
<option value="value 3">9</option>
<option value="value 3">9</option>
<option value="value 3">8</option>
</select>
</div>
</div>
</form>
<td>
</table>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js">
</body>
</html>
<htm>