نحوه تراز کردن col ها به صورت افقی bootstrap

2 روز پیش
توسط سعید آپدیت شد
سعید ( 17580 تجربه )
2 روز پیش
تخصص : برنامه نویس وب

@ali.bayat @hesammousavi @hossein.r.1442 @milad @elyasbeshkani @juza66 @rezajashnsaz0011 @rezajashnsaz0011 @endworld @mohsenbostan @mohsenbostan @alireza.mzh @bahrami.nasrin90 و همه دوستان ....

سلام دوستان فرض کنید می خواهیم پست های یک وبلاگ رو نمایش بدیم ،
در هر row چهار تا ، 3-col وجود داره یعنی در ردیف چهار پست قرار میگیره.
ببینید متن کوتاه همه مقالات یکسان نیست و این موضوع باعث میشه col ها از لحاظ افقی با هم تراز نشن.
میخوام از لحاظ افقی هم تراز بشن ، دقیقا مثل بخش مقالات راکت.
البته در راکت فکر میکنم متن کوتاه رو از متن اصلی میگیرن ، ولی من میخوام متن کوتاه دستی وارد بشه ، البته با تعداد کاراکتر مشخص مثلا 170 کاراکتر.
دوستان اگر راحل دارن ، ممنون میشم راهنمایی کنن.

بهترین پاسخ انتخاب شده توسط سعید
میلاد
2 روز پیش

اینم راه حل در بوت استرپ:
https://getbootstrap.com/docs/4.0/components/card/#card-layout

میلاد ( 140230 تجربه )
2 روز پیش
تخصص : طراح رابط کاربری - Front-End

اول اینکه: کدهاتون رو قرار بدین.
دوم: راه حلش سادس، ارتفاع ثابتی رو بهشون بدین درست میشه. مثلا ارتفاع همشون رو بدین 500 پیکسل.

سعید ( 17580 تجربه )
2 روز پیش
تخصص : برنامه نویس وب

@milad

من از card بوت استرپ استفاده کردم بشرح زیر :

 <div class="col-sm-12 col-lg-3 col-md-6">
                            <div class="card mb-4">
                                <div class="hovereffect">
                                    <a href='{{route('SinglePost',$top->slug)}}'>
                                        <img class="card-img img-fluid" src="{{$top->img}}" alt="{{$top->title}}">
                                    </a>
                                </div>
                                <div class="card-body pb-0">
                                    <h5 class="card-title">{{$top->title}}</h5>
                                    <p class="card-text">{{$top->short_body}}</p>
                                    <div class="row bg-light p-2">
                                        <div class="col-12">
                                            @foreach($top->category as $cat)
                                                <a href="" class="p-1 badge-success text-decoration-none" style="font-size: 13px">{{$cat->name}}</a>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer p-0">
                                    <div class="row p-3">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-6"><a class="text-decoration-none"
                                                                      href="{{route('show_profile',$top->user->acc_name)}}">{{$top->user->full_name}}</a>
                                                </div>
                                                <div class="col-6">
                                                    <ul class="list" style="list-style: none">
                                                        <li class="{{'post'.$top->id}} like float-left red fa
                                                            @if(! auth()->check())
                                                            fa-heart-o
                                                            @elseif(auth()->check())
                                                        {{! auth()->user()->has_like($top->id) ? 'fa-heart-o' : 'fa-heart'}}
                                                        @endif
                                                            " post-id="{{$top->id}}" onclick="return like(this)"></li>
                                                        <li class="float-left {{'like_count'.$top->id}}">{{$top->like_count}}</li>
                                                        <li class="float-left fa fa-eye"></li>
                                                        <li class="float-left">{{$top->view_count}}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
میلاد ( 140230 تجربه )
2 روز پیش
تخصص : طراح رابط کاربری - Front-End

اینم راه حل در بوت استرپ:
https://getbootstrap.com/docs/4.0/components/card/#card-layout

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