ساخت باکس هم اندازه در بوت استرپ


منتشر شده در : یکشنبه, 09 تیر 98


ساخت باکس هم اندازه در بوت استرپ

ساخت باکس هم اندازه در bootstarp 4

با سلام خدمت کاربران عزیز وب سایت ره نگاشت با مقاله آموزش بوت استرپ در خدمت شما هستیم. شاید برای شما هم پیش آمده باشه که یک تعداد باکس داشته باشید و بخواهید همه ی باکس ها هم اندازه هم باشه برای این کار دو راه حل وجود دارد طول ثابت یعنی اینکه شما height باکس تون رو برابر یک عدد قرار دهید این کار مشکلاتی داره از جمله اینکه اگر شما در آینده بخواهید محتوای دیگری به باکس اضافه کنید باید طول بیشتر کنید و هم اینکه موقع ریسپاسنسیو مطمئنا به مشکل برخواهید خورد.

با مقاله آموزش بوت استرپ

در این مقاله یک روش ساده برای هم اندازه کردن باکس ها به شما آموزش می دهیم.

 کافی است شما height  کلاسی که بهش background دادید رو بربر با 100% قرار دهید. مانند مثال زیر

آموزش بوت استرپ

 

<style>
    .content {
        height: 100%;
        padding: 20px 15px;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="content" style="background: blueviolet">
                <h2>this is a box 2</h2>
                <p>this is a bootstrap</p>
                <p>this is a bootstrap</p>
                <p>this is a bootstrap</p>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="content" style="background: red">
                <h2>this is a box 2</h2>
                <p>this is a bootstrap</p>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="content" style="background: blue">
                <h2>this is a box 2</h2>
                <p>this is a bootstrap</p>
                <p>this is a bootstrap</p>
                <p>this is a bootstrap</p>
            </div>
        </div>

        <div class="col-lg-3">
            <div class="content" style="background: green">
                <h2>this is a box 2</h2>
                <p>this is a bootstrap</p>
            </div>
        </div>
    </div>
</div>

نظر شما: