не получить правильный размер на маленьком экране - PullRequest
Новая
       3

не получить правильный размер на маленьком экране

0 голосов
/ 11 апреля 2020

Я использую bootstrap4 и Stream UI Kit для пользовательского интерфейса в моем приложении, но я не получаю правильный размер столбца на маленьком экране !!

пример! enter image description here

это должно быть по одному на строку при просмотре на мобильном телефоне !! с col-md-4 вы можете проверить демо 1011 *

<!-- Campaigns Grid -->
    <section class="pt-11 pb-6 bg-light">
        <div class="container">


            <div class="d-flex justify-content-between align-items-center mb-5">
                <h2 class="h3 text-center">{{ trans('user.offers') }}</h2>
                <a href="{{ url('/campaigns?type=offer') }}" class="btn btn-outline-primary">{{ trans('user.all') }}</a>
            </div>

            <div class="row">
                @foreach($offers as $demand)
                    <div class="col-md-4 mb-5">

                        <div class="card h-100 border-0 shadow">
                            <a href="{{ url('/campaign/'.$demand->id) }}" class="d-block bg-gradient rounded-top">
                                <img class="card-img-top hover-fade-out" src="{{ url('upload/campaign/'. $demand->cover .'/') }}" alt="{{ $demand->title }}"  height="244">
                            </a>
                            <div class="card-body">
                                <a href="{{ url('/campaign/'.$demand->id) }}">
                                    <h3>{{ $demand->title }}</h3>
                                </a>
                                <p>
                                    {!! str_limit(strip_tags($demand->content), 128) !!}
                                </p>
                            </div>
                            <div class="card-footer d-flex">
                                @foreach($demand->categories as $category)
                                    @if(App::isLocale('ar')) <a href="{{ url('/category/'.$category->id) }} " class="badge badge-pill badge-secondary mr-1" >{{ $category->title_ar }} </a>
                                    @elseif(App::isLocale('fr')) <a href="{{ url('/category/'.$category->id) }}" class="badge badge-pill badge-secondary mr-1">{{ $category->title }}</a>
                                    @else <a href="{{ url('/category/'.$category->id) }}"  class="badge badge-pill badge-secondary mr-1">{{ $category->title_en }}</a>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endforeach


            </div>
        </div>
    </section>
    <!-- End Campaigns Grid -->

1 Ответ

0 голосов
/ 11 апреля 2020

Вы можете использовать col-md-4 вместе со всеми классами для устройств. Используйте это по одному в строке

class = «col-6 col-md-4 col-sm-4 col-lg-4 col-xl-4»

Эти классы сами дают отзывчивый на всех устройствах. col - установить мобильный col-md - установить средние устройства col-sm - маленький col-lg - большой col-xl - очень большой

Они будут управлять автоматически.

...