imaniy
6 سال پیش توسط imaniy مطرح شد
8 پاسخ

هم‌تراز شدن دیو ها با یکدیگر

سلام من باید چیکار کنم دیوهایی که کنار هم هستن در هر سایز صفحه ای با هم یکسان باشن؟
به عکس زیر توجه کنید میخام این دو کادر همیشه از نطر ارتفاع یکسان باشن! از بوت استرپ هم استفاده میکنم.

http://uupload.ir/files/z9ix_img_20190523_170131_206.jpg


ثبت پرسش جدید
میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

در راهکار دوم به کلاس هایی که در این دو خط اضافه شده اند دقت کنید:

<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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

می تونید برای عناصر سمت چپ، ابتدا یک کارت بیرونی قرار بدین، سپس به هر دو کارت کلاس 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>

imaniy
تخصص : طراح وب
@imaniy 6 سال پیش آپدیت شد
0

دوست عزیز @milad این روش خیلی خوب بود ولی نمیدونم چرا مشکلم رو حل نکرد اگه به عکس زیر توجه کنید کمی بهترش کرد ولی خوب نشد بازم :

https://www.imgurl.ir/uploads/k69943_.jpg

راهی هست که بگم کادر سمت چبی اون بخش وارد کردن (پیام شما) بزرگتر بشه تا هم سایز دیو سمت راستی ببشه؟ کدم رو زیر گذاشتم ممنون از راهنماییتون این مشکل خیلی رو مخه.

https://jsbin.com/munotereba/edit?html,output


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

در راهکاری که من خدمتتون عرض کردم، شما باید عناصر سمت چپ رو درون یک کارت بزارید و به اون ارتفاع 100 رو بدین.
اینجوری یک قاب برای عناصر سمت چپ ایجاد میشه و ظاهرش متفاوت به چشم میاد.

کدهایی که قرار دادین رو کامل بزارید، کدهای html هستند، شامل css نمیشه، کدهای css رو هم قرار بدین.


imaniy
تخصص : طراح وب
@imaniy 6 سال پیش مطرح شد
0

پس برای اینکار وجود یک card ضروری هست؟ الان مشکل رو حل کردم ممنون ولی یه مشکلی هست h-100 که میدی سایز خیلی بزرگتر از حد فعلی خودش میشه.
امیدوار بودم مثل عرض ها که فلکس باکس ها مشکل رو حل میکنن برای ارتفا هم راه آسونی در نظر گرفته باشن!
@milad


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش آپدیت شد
1

نه ضروری نیستش. یک راهکار بود که ارائه دادم، راه های مختلفی وجود داره.

این هم راهکار دیگری:

<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>

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

در راهکار دوم به کلاس هایی که در این دو خط اضافه شده اند دقت کنید:

<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
تخصص : طراح وب
@imaniy 6 سال پیش مطرح شد
1

خیلی خیلی خیلی تشکر میکنم :)


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 6 سال پیش مطرح شد
1

@imaniy
خواهش می کنم، سرزنده باشید.
همانطور که دیدید از خصوصیت flex استفاده کردم، خیلی راهگشا هستش.


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

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