آفلاین
user-avatar

یونیفرم کردن ارتفاع card ها در آموزش پروژه محور بوت استرپ 4 قسمت پیاده سازی مینی پروژه اول

3 سال پیش
توسط محمود آپدیت شد
آفلاین
user-avatar
محمود ( 684 تجربه )
3 سال پیش

با سلام وقتی card ها رو داخل row و col-- قرار میدهیم چطوری سایز cart ها را یونیفرم کنیم ؟
مثلا اگر ارتفاع متن ها متفاوت بود ارتفاع کارت ها ثابت باشد و همه در یک سایز نمایش داده بشوند
از کلاس های cart- group و cart-deck داخل row استفاده کردم جواب نداد.
ممنون از راهنماییتون

   <div class="container bg-light py-5">
                <div class="row">
                    <div class="col-lg-4 col-md-6 ">
                    <div class="card box-shadow mb-4">
                        <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-tite">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    </div>

            </div>
        </div>
بهترین پاسخ انتخاب شده توسط محمود
آفلاین
user-avatar
حسام موسوی
3 سال پیش

با سلام اینم روشی هست ولی شما حتما اشتباه از card-deck استفاده کردید روش زیر رو ببینید

<div class="row card-deck>
                    <div class="card box-shadow mb-4">
                        <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-tite">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>

            </div>
آفلاین
user-avatar
محمود ( 684 تجربه )
3 سال پیش

به

<div class="col-lg-4 col-md-6 ">

کلاس align-items-stretch d-flex را اضافه کردم درست شد.

<div class="col-lg-4 col-md-6  d-flex align-items-stretch">

اگر راه بهتری هست ممنون میشم راهنمایی کنید.

آفلاین
user-avatar
حسام موسوی ( 404186 تجربه )
3 سال پیش
تخصص : طراح و برنامه نویس

با سلام اینم روشی هست ولی شما حتما اشتباه از card-deck استفاده کردید روش زیر رو ببینید

<div class="row card-deck>
                    <div class="card box-shadow mb-4">
                        <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید،.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-title">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>
                    <div class="card box-shadow mb-4">
                                <img class="card-img-top" src="https://roocket.ir/public/image/2018/1/21/1516505980bootstrap4-cover-1.jpg" alt="Card image cap">
                                <div class="card-body">
                                  <h5 class="card-tite">دوره بوت استرپ</h5>
                                  <p class="card-text">طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.</p>   
                                </div>
                                <div class="card-footer d-flex justify-content-between align-items-center ">
                                    <div class="btn-group btn-group-sm ">
                                            <button class="btn  btn-outline-danger">دانلود</button>
                                            <button class="btn  btn-outline-success">نمایش</button>
                                    </div>
                                    <small>9 دقیقه</small>
                                </div>
                            </div>

            </div>
آفلاین
user-avatar
محمود ( 684 تجربه )
3 سال پیش

ممنون از پاسختون.
بنابراین از card-deck فقط در فرمت مخصوصی که بوت استرپ تعریف کرده میشه استفاده کرد درسته؟
حالا که از گرید نمیشه استفاده کرد باید به card ها ، min-width بدهیم تا در هر سطر تعداد دلخواه card ها نمایش داده بشوند؟

.card-deck .card {
    min-width: 220px;
}

شبیه آموزش پروژه محور بوت استرپ ۴ قسمت پیاده سازی مینی پروژه دوم ؟
(این آموزش رو بعد از نوشتن اولین گفتگو دیدم)

برای ارسال پاسخ باید وارد سایت شوید