مشکل در Bootstrap

4 روز پیش توسط Mohammad آپدیت شد
آفلاین
user-avatar
Mohammad ( 21200 تجربه )
5 روز پیش

لینک کوتاه اشتراک گذاری

0

سلام وقتتون بخیر
من این قالب رو با بوتسترپ طراحی کردم ولی مشکل ریسپانسیو داره و از کناره میزنه بیرون
لطفا راهنماییم کنید.

توضیح تصویر رو وارد کنید

کد های HTML👇👇👇

<!DOCTYPE html>
<html lang="en" dir="rtl">
<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">
    <link rel="stylesheet" href="styles/css/style.css">
    <link rel="stylesheet" href="styles/Bootstrap/bootstrap-4.6.0-dist/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/Bootstrap/bootstrap-4.6.0-dist/bootstrap-4.6.0-dist/css/bootstrap-rtl.css"> 
    <link rel="stylesheet" href="fonts/vazir.css">
    <title>Bootstrap Project 4</title>
</head>
<body>
    <!-- Nav -->
    <nav class="navbar navbar-dark bg-dark navbar-expand-lg fixed-top p-3">
        <div class="container d-flex align-items-center">
            <a class="navbar-brand p-0" href="#">وبسایت آموزشی راکت</a>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
                <ul class="navbar-nav font-size-5">
                    <li class="nav-item"><a class="nav-link" href="#">صفحه اصلی</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">مقالات</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">دوره های آموزشی</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">درباره ما</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">تماس با ما</a></li>
                </ul>
                <form action="#" class="form-inline">
                    <input type="search" class="form-control mr-0 mr-lg-4" placeholder="جستجو ...">
                    <button class="btn btn-outline-success mr-0 mr-md-2 mt-2 mt-sm-0" type="button">جستجو</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- Header -->
    <header class="header">
        <div class="carousel slide" data-ride="carousel" data-interval="3500" id="Mycarousel-1">
            <ol class="carousel-indicators">
                <li style="cursor: pointer;" class="active" data-target="#Mycarousel-1" data-slide-to="0"></li>
                <li style="cursor: pointer;" class="" data-target="#Mycarousel-1" data-slide-to="1"></li>
                <li style="cursor: pointer;" class="" data-target="#Mycarousel-1" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="holder.js/1850x560?bg=#777&fg=#777" alt="Image 1">
                    <div class="container">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>عنوان اسلاید</h2>
                            <p>باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p>
                            <a class="btn btn-md btn-primary mb-3" href="#">مشاهده</a>
                        </div>
                    </div>
                </div>

                <div class="carousel-item">
                    <img class="d-block w-100" src="holder.js/1850x560?bg=#777&fg=#777" alt="Image 1">
                    <div class="container">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>عنوان اسلاید</h2>
                            <p>باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p>
                            <a class="btn btn-md btn-primary mb-3" href="#">مشاهده</a>
                        </div>
                    </div>
                </div>

                <div class="carousel-item">
                    <img class="d-block w-100" src="holder.js/1850x560?bg=#777&fg=#777" alt="Image 1">
                    <div class="container">
                        <div class="carousel-caption d-none d-md-block">
                            <h2>عنوان اسلاید</h2>
                            <p>باور ما اینست که کاربران ایرانی لایق بهترین ها هستند و باید بهترین و بروزترن فیلم های آموزشی و مقالات در اختیار آنها قرار بگیرد تا بتوانند به سرعت پیشرفت کنند و جزء بهترین ها در صنعت طراحی و برنامه نویسی وب شوند . با ما همراه باشید تا بهترین ها رو لایق بهترین کاربران کنیم</p>
                            <a class="btn btn-md btn-primary mb-3" href="#">مشاهده</a>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#Mycarousel-1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>

            <a class="carousel-control-next" href="#Mycarousel-1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </header>

    <!-- Main -->
    <main class="main">
        <section>
            <div class="container-medium markting py-4">
                <div class="row">
                    <div class="col-md-4 text-center mb-5">
                        <img class="rounded-circle" src="holder.js/140x140" alt="Image 1">
                        <h4 class="mt-3">عنوان</h4>
                        <p class="text-muted line-height-md my-2">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،</p>
                        <a class="btn btn-primary" href="#">مشاهده جزئیات »</a>
                    </div>

                    <div class="col-md-4 text-center mb-5">
                        <img class="rounded-circle" src="holder.js/140x140" alt="Image 1">
                        <h4 class="mt-3">عنوان</h4>
                        <p class="text-muted line-height-md my-2">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،</p>
                        <a class="btn btn-primary" href="#">مشاهده جزئیات »</a>
                    </div>

                    <div class="col-md-4 text-center mb-5">
                        <img class="rounded-circle" src="holder.js/140x140" alt="Image 1">
                        <h4 class="mt-3">عنوان</h4>
                        <p class="text-muted line-height-md my-2">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،</p>
                        <a class="btn btn-primary" href="#">مشاهده جزئیات »</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Articles -->
        <article class="my-5">
            <div class="container-medium">
                <h1 class="text-center font-size-2 my-5">مقالات</h1>
                <div class="row d-flex justify-content-center align-items-center text-center text-md-right mt-5">
                    <div class="col-12 col-md-7">
                        <h3 class="font-weight-600"><a class="text-dark" href="#">عواقب یک وبسایت وردپرسی هک شده</a></h3>
                        <p class="text-muted">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>
                    </div>

                    <div class="col-5 d-none d-md-block"><img class="img-thumbnail" src="holder.js/400x400" alt="Image"></div>
                </div>
                <hr class="box-divider my-5">
                <div class="row d-flex flex-row-reverse justify-content-center align-items-center text-center text-md-right">
                    <div class="col-12 col-md-7">
                        <h3 class="font-weight-600 mr-5"><a class="text-dark" href="#">عواقب یک وبسایت وردپرسی هک شده</a></h3>
                        <p class="text-muted mr-5">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>
                    </div>

                    <div class="col-5 d-none d-md-block"><img class="img-thumbnail" src="holder.js/400x400" alt="Image"></div>
                </div>
            </div>
        </article>
    </main>

    <!-- Footer -->
    <footer class="footer bg-light py-4">
        <div class="container-medium d-flex flex-column flex-sm-row justify-content-between align-items-center">
            <p class="text-center text-sm-right mb-3 mb-sm-0">
                &copy; 1400-1401 وبسایت آموزشی راکت <br>
                <a class="mr-2" href="#">قوانین</a>
                <a class="mr-2" href="#">حریم خصوصی</a>
            </p>
            <p><a href="#">برگشت به بالای صفحه</a></p>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    <script src="styles/js/holder.min.js"></script>
</body>
</html>

کد های CSS👇👇👇

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}

html {
    font-size: 100%;
    font-family: "Vazir" !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    background-color: #f5f5f5 !important;
    font-size: 100%;
    font-family: "Vazir" !important;
    text-align: right !important;
}

.container {max-width: 1450px !important;}
.container-medium {max-width: 900px !important; margin: 0 auto;}
.container-small {max-width: 700px !important; margin: 0 auto;}

.box-divider {margin: 5rem 0}

.font-weight-bold {font-weight: bold !important;}
.font-weight-600 {font-weight: 600 !important;}
.font-weight-400 {font-weight: 400 !important;}
.font-weight-300 {font-weight: 300 !important;}
.font-weight-normal {font-weight: normal !important;}

.font-size-1 {font-size: 3rem !important;}
.font-size-2 {font-size: 2rem !important;}
.font-size-3 {font-size: 1.5rem !important;}
.font-size-4 {font-size: 1rem !important;}
.font-size-5 {font-size: .9rem !important;}
.font-size-6 {font-size: .75rem !important;}

.line-height-lg {line-height: 4rem !important;}
.line-height-md {line-height: 2rem !important;}
.line-height-sm {line-height: 1rem !important;}
بهترین پاسخ
آفلاین
user-avatar
Banana Life
4 روز پیش

در قسمت تگ nav کلاس fixed-top, p-3 را پاک کنید و در main از کلاس container خود بوت استرپ استفاده کنید و اگه میخواهید کلاسی از خود بوت استرپ را سفارشی کنید property های مربوط به کلاس که از قبل تعریف شده را فراموش نکنید.

آفلاین
user-avatar
پایان جهان ( 130875 تجربه )
5 روز پیش
تخصص : جوجه برنامه نویس وردپرس و لاراول

لینک کوتاه اشتراک گذاری

0

درود...
کدها رو به صورت آنلاین ایجاد کن تا ویرایش کنیم:
https://jsfiddle.net/

آفلاین
user-avatar
Banana Life ( 2541 تجربه )
4 روز پیش

لینک کوتاه اشتراک گذاری

1

در قسمت تگ nav کلاس fixed-top, p-3 را پاک کنید و در main از کلاس container خود بوت استرپ استفاده کنید و اگه میخواهید کلاسی از خود بوت استرپ را سفارشی کنید property های مربوط به کلاس که از قبل تعریف شده را فراموش نکنید.

آفلاین
user-avatar
Mohammad ( 21200 تجربه )
4 روز پیش

لینک کوتاه اشتراک گذاری

0

@joker.troll021

خیلی ممنون درست شد
مشکل از container های بود که خودم تعریف کرده بودم.

برای ارسال پاسخ لازم است، ابتدا وارد سایت شوید.