سلام من باید چیکار کنم دیوهایی که کنار هم هستن در هر سایز صفحه ای با هم یکسان باشن؟
به عکس زیر توجه کنید میخام این دو کادر همیشه از نطر ارتفاع یکسان باشن! از بوت استرپ هم استفاده میکنم.
در راهکار دوم به کلاس هایی که در این دو خط اضافه شده اند دقت کنید:
<form class="mt-md-4 mt-2 wow jackInTheBox h-100 d-flex flex-column">
و
<textarea class="form-control mb-3 flex-grow-1" id="cmnt" placeholder="پیام شما*""></textarea>
می تونید برای عناصر سمت چپ، ابتدا یک کارت بیرونی قرار بدین، سپس به هر دو کارت کلاس h-100 رو اضافه کنید. هم ارتفاع می شوند.
کدها برای بوت استرپ:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-6 mb-3">
<div class="card h-100">
بدنه بخش راستی
</div>
</div>
<div class="col-lg-6">
<div class="card h-100">
بدنه بخش چپی
</div>
</div>
</div>
</div>
</section>
دوست عزیز @milad این روش خیلی خوب بود ولی نمیدونم چرا مشکلم رو حل نکرد اگه به عکس زیر توجه کنید کمی بهترش کرد ولی خوب نشد بازم :
https://www.imgurl.ir/uploads/k69943_.jpg
راهی هست که بگم کادر سمت چبی اون بخش وارد کردن (پیام شما) بزرگتر بشه تا هم سایز دیو سمت راستی ببشه؟ کدم رو زیر گذاشتم ممنون از راهنماییتون این مشکل خیلی رو مخه.
در راهکاری که من خدمتتون عرض کردم، شما باید عناصر سمت چپ رو درون یک کارت بزارید و به اون ارتفاع 100 رو بدین.
اینجوری یک قاب برای عناصر سمت چپ ایجاد میشه و ظاهرش متفاوت به چشم میاد.
کدهایی که قرار دادین رو کامل بزارید، کدهای html هستند، شامل css نمیشه، کدهای css رو هم قرار بدین.
پس برای اینکار وجود یک card ضروری هست؟ الان مشکل رو حل کردم ممنون ولی یه مشکلی هست h-100 که میدی سایز خیلی بزرگتر از حد فعلی خودش میشه.
امیدوار بودم مثل عرض ها که فلکس باکس ها مشکل رو حل میکنن برای ارتفا هم راه آسونی در نظر گرفته باشن!
@milad
نه ضروری نیستش. یک راهکار بود که ارائه دادم، راه های مختلفی وجود داره.
این هم راهکار دیگری:
<form class="mt-md-4 mt-2 wow jackInTheBox h-100 d-flex flex-column">
<div class="row">
<label class="sr-only" for="inlineFormInputGroupUsername2">name</label>
<div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="نام و نشان*">
</div>
<label class="sr-only" for="inlineFormInputGroupUsername2">mail</label>
<div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="آدرس ایمیل*">
</div>
</div>
<div class="row">
<label class="sr-only" for="inlineFormInputGroupUsername2">number</label>
<div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="شماره تماس*">
</div>
<label class="sr-only" for="inlineFormInputGroupUsername2">web</label>
<div class="input-group mb-2 mr-sm-2 col-md-6 col-sm-12">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="آدرس سایت">
</div>
</div>
<textarea class="form-control mb-3 flex-grow-1" id="cmnt" placeholder="پیام شما*""></textarea>
<button class="btn btn-primary text-white">ارسال</button>
</form>
در راهکار دوم به کلاس هایی که در این دو خط اضافه شده اند دقت کنید:
<form class="mt-md-4 mt-2 wow jackInTheBox h-100 d-flex flex-column">
و
<textarea class="form-control mb-3 flex-grow-1" id="cmnt" placeholder="پیام شما*""></textarea>
@imaniy
خواهش می کنم، سرزنده باشید.
همانطور که دیدید از خصوصیت flex استفاده کردم، خیلی راهگشا هستش.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟