با سلام وقتی 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://static.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://static.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://static.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>
با سلام اینم روشی هست ولی شما حتما اشتباه از 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>
به
<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">
اگر راه بهتری هست ممنون میشم راهنمایی کنید.
با سلام اینم روشی هست ولی شما حتما اشتباه از 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>
ممنون از پاسختون.
بنابراین از card-deck فقط در فرمت مخصوصی که بوت استرپ تعریف کرده میشه استفاده کرد درسته؟
حالا که از گرید نمیشه استفاده کرد باید به card ها ، min-width بدهیم تا در هر سطر تعداد دلخواه card ها نمایش داده بشوند؟
.card-deck .card {
min-width: 220px;
}
شبیه آموزش پروژه محور بوت استرپ ۴ قسمت پیاده سازی مینی پروژه دوم ؟
(این آموزش رو بعد از نوشتن اولین گفتگو دیدم)
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟