علیرضا کفایتی
3 سال پیش توسط علیرضا کفایتی مطرح شد
4 پاسخ

مشکل همیشگی بوت استرپ

سلام
در حال طراحی قالب سایتم هستم . به مشکل همیشگی بوت استرپ برخوردم :
توضیح تصویر رو وارد کنید
همانطور که میبینید نوار اسکرول ایجاد شده و هیچ دلیل منطقی هم نداره . هیچ 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="css/style.css">
    <link rel="stylesheet" href="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="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{

}

ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 3 سال پیش مطرح شد
2

از صفحه inspect بگیرید یکی یکی المنت ها رو پایین بیاید ببینید اون محدوده ای که هایلایت میکنه برای کدومش بیشتر از عرض صفحه نشون میده... و چرا اینطور میشه.

در نهایت احتمالا با یک تنظیم width یا max-width یا overflow:hidden قضیه حل میشه.


علیرضا کفایتی
تخصص : برنامه نویس laravel, vue.js
@alirezakefayati 3 سال پیش مطرح شد
1

@mhyeganeh
ممنون ، نه overflow:hidden متاسفانه توی موبایل کار نمیکنه .
خیلی عجیبه . وقتی width: 100%; میدم کم هست و وقتی width: 100.9%; میدم کامل پر میشه . وقتی هم کلاس row رو میگیرم درست میشه کلا و نیازی به این کار ها نیست . من که واقعا مشکلش رو نفهمیدم ...


محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 3 سال پیش مطرح شد
2

اینکه width: 100.9% بخوایم بذاریم چندان کار اصولی و درستی به نظر نمی‌رسه و اگر حوصلتون کشید بیشتر براش وقت بگذارید تا متوجه علتش بشید و اصولی برطرفش کنید. (سر و کله زدن با چنین مواردی در CSS واقعا اعصاب و حوصله میخواد که همیشه موجود نیست😅)

برای سایز موبایل هم میتونید از همون devtools بذارید روی حالت موبایل و دوباره همون فرایند قبلی رو طی کنید.


Banana Life
@shift.delete 3 سال پیش مطرح شد
3

علت به وجود امدن اسکرول به خاطر row margin-left است
وقتی از بوت استرپ استفاده میکنی بهتر است row رو داخل container یا container-fluid تعریف کنی تا به مشکل نخوری.
واگه میخوای فقط از row استفاده کنی باید margin-left شو را صفر کنی ولی همان طور که گفتم بهتر است row رو داخل container یا container-fluid تعریف کنی تا در قسمت های دیگه به مشکل بر نخورید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام