مشکل همیشگی بوت استرپ
سلام
در حال طراحی قالب سایتم هستم . به مشکل همیشگی بوت استرپ برخوردم :
همانطور که میبینید نوار اسکرول ایجاد شده و هیچ دلیل منطقی هم نداره . هیچ padding هم ندادم .
کد های html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>فرزند صالح</title>
<link rel="stylesheet" href="https://roocket.ir/css/style.css">
<link rel="stylesheet" href="https://roocket.ir/css/bootstrap.rtl.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<header class="row">
<span class="header-title col-lg-2">فرزند صالح</span>
<form class="d-flex search col-lg-5">
<input class="form-control" type="search" placeholder="جستجو ..." aria-label="جستجو ...">
<button class="btn btn-primary" type="submit"><i class="bi bi-search" style="font-size: 20px;"></i></button>
</form>
<div class="div-auth col-lg-5">
<a class="btn-auth" href="https://roocket.ir/page/auth">ورود / ثبت نام</a>
</div>
</header>
<nav>
</nav>
<div class="title"></div>
<div class="course"></div>
<div class="info"></div>
<div class="article"></div>
<div class="teacher"></div>
<div class="comment"></div>
<div class="mail"></div>
<footer></footer>
</body>
</html>کد های css :
@font-face {
font-family: tanha;
src: url(font/Tanha.ttf);
}
*{
text-align: center;
text-align: right;
direction: rtl;
font-family: tanha;
}
header{
background-color: rgb(0,152,167);
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
}
.header-title{
font-size: 30px;
width: 170px !important;
margin-right: 20px;
display: inline-block;
}
.search{
display: inline-block;
width: 40%;
height: 40px;
display: inline-block;
}
.div-auth{
text-align: end;
display: inline-block;
}
.btn-auth{
width: 20%;
display: inline-block;
background-color: brown;
color: #fff !important;
text-decoration: none;
border-radius: 20px;
text-align: center;
padding-top: 8px;
height: 40px;
width: 200px !important;
display: inline-block;
}
nav{
}پاسخ‌ها
4
از صفحه inspect بگیرید یکی یکی المنت ها رو پایین بیاید ببینید اون محدوده ای که هایلایت میکنه برای کدومش بیشتر از عرض صفحه نشون میده... و چرا اینطور میشه.
در نهایت احتمالا با یک تنظیم width یا max-width یا overflow:hidden قضیه حل میشه.
@mhyeganeh
ممنون ، نه overflow:hidden متاسفانه توی موبایل کار نمیکنه .
خیلی عجیبه . وقتی width: 100%; میدم کم هست و وقتی width: 100.9%; میدم کامل پر میشه . وقتی هم کلاس row رو میگیرم درست میشه کلا و نیازی به این کار ها نیست . من که واقعا مشکلش رو نفهمیدم ...
اینکه width: 100.9% بخوایم بذاریم چندان کار اصولی و درستی به نظر نمی‌رسه و اگر حوصلتون کشید بیشتر براش وقت بگذارید تا متوجه علتش بشید و اصولی برطرفش کنید. (سر و کله زدن با چنین مواردی در CSS واقعا اعصاب و حوصله میخواد که همیشه موجود نیست😅)
برای سایز موبایل هم میتونید از همون devtools بذارید روی حالت موبایل و دوباره همون فرایند قبلی رو طی کنید.
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
علت به وجود امدن اسکرول به خاطر row margin-left است
وقتی از بوت استرپ استفاده میکنی بهتر است row رو داخل container یا container-fluid تعریف کنی تا به مشکل نخوری.
واگه میخوای فقط از row استفاده کنی باید margin-left شو را صفر کنی ولی همان طور که گفتم بهتر است row رو داخل container یا container-fluid تعریف کنی تا در قسمت های دیگه به مشکل بر نخورید.