Так что я пытаюсь сделать Bootstrap mobile-first (но он вроде упал на секунду во время разработки, упс), сайт. Как следует из предыдущего предложения, веб-сайт будет в основном использоваться мобильными пользователями, поэтому он, очевидно, должен хорошо выглядеть на всех дисплеях, особенно на небольшом дисплее. Я почти забыл об этом требовании в процессе разработки и просто продолжал пренебрегать дизайном веб-сайта на компьютере, и теперь я застрял в ситуации, когда пытаюсь адаптировать веб-сайт для мобильных устройств. Очевидно, как я уже сказал в заголовке, для этого используется bootstrap, поэтому можно предположить, что он будет адаптивным из коробки, однако из-за сложности некоторых организаций у меня возникли некоторые проблемы с отзывчивостью. Первое и самое большое мобильное раздражение на данный момент - это своеобразное пустое пространство под разваливающейся панелью навигации, показанной ниже. Эта проблема странная, поскольку сворачивающаяся панель навигации (на больших экранах) представляет собой меню пилюль боковой панели, и переход к определенным таблеткам и свертывание меню иногда не оставляют пустого пространства под ним, а иногда и делают. Я подумал, что, возможно, это как-то связано с тем, как я форматировал содержимое div каждой таблетки, но стандартизация этого в соответствии с макетом, используемым на вкладках, где он правильно закрывается, не решает проблему. Я добавлю картинку и код для этого свертывающегося меню, а затем продолжу свою вторую проблему в данный момент.
(https://gyazo.com/5e9c29a7787393105242624227f80802)
<div class="container-fluid d-flex vh-95 flex-column">
<div class="row flex-fill d-flex justify-content-start">
<nav class="navbar navbar-expand-md flex-fill flex-column justify-content-start bg-secondary">
<button class="navbar-toggler" data-toggle="collapse" data-target="#sidebarNav">Menu</button>
<div class="col-sm bg-secondary portlet-container portlet-dropzone px-0 align-top mt-0">
<div class="collapse navbar-collapse" id="sidebarNav">
<div class="nav flex-column nav-pills w-100" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active text-white" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link text-white" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
@if (Auth::user()->type === 'user')
<a class="nav-link text-white" id="v-pills-friends-tab" data-toggle="pill" href="#v-pills-friends" role="tab" aria-controls="v-pills-friends" aria-selected="false">Friends</a>
<!-- More tabs and the individual div content below this but it's quite lengthy so I'll leave those out to save some room on the post, if anyone believes it might be an issue to do with my div tab layouts, then I can post those later -->
Пустое серое пространство показано, чтобы уточнить, появляется на некоторых вкладках, а не на других. Например, одна вкладка может позволить меню полностью закрыться, вплоть до нижней части текста меню (как и должно быть), а другая может оставить это уродливое пустое пространство, занимающее примерно половину области просмотра.
Следующая проблема, которая у меня есть, связана с тем, что содержимое не перемещается вниз путем переориентации строк. Я приложу изображение ниже того, о чем я говорю, но когда область просмотра становится меньше (в конечном итоге, до наименьшего размера), строки реорганизуются в столбцы, как должно bootstrap, но на сайте есть несколько строк, и когда вы переходите на мобильные устройства, заголовки строк не вытесняются реорганизацией строк в столбцы, оставляя уродливое перекрытие. Я подумал, что, возможно, это как-то связано с тем, как я организовал строки, поэтому я добавил строку иерархии с классом flex-column, содержащим другие строки, однако это не решило проблему. Ниже я также добавлю изображение и код для этой проблемы.
(https://gyazo.com/672ec2fba7d7749ff0e35a4e57978c98)
<div class="container-fluid px-5" style="z-index: 1059 !important">
<div class="row flex-column">
@if(isset($events) || $events != null)
@if(count($events['yearlies']) > 0)
<div class="row pt-2">
<h3 class="text-dark">Yearly Featured Events</h3>
<a href="yearlyalle" class="btn btn-primary ml-3">View all</a>
</div>
<div class="row2 row pt-2">
@foreach($events['yearlies'] as $yearly)
<div class="col-md-2 py-2">
<div class="card h-100" style="z-index: 1059 !important">
<img class="card-img-top h-35" src="/storage/event_images/{{$yearly->event_picture_link}}" alt="Card image cap">
<div class="card-body h-65">
<h5 class="card-title">{{$yearly->name}}</h5>
<p class="card-text">{{$yearly->event_desc_short}}</p>
</div>
<ul class="list-group list-group-flush">
@if ($yearly->event_free === 1)
<li class="list-group-item"><h6 class="font-weight-bold">Free</h6></li>
@else
<li class="list-group-item"><h6 class="font-weight-bold">${{$yearly->event_low_cost}} - ${{$yearly->event_high_cost}}</h6></li>
@endif
</ul>
<div class="card-body text-center h-25 py-auto">
<a href="/events/{{$yearly->id}}" class="card-link stretched-link">View Event</a>
</div>
</div>
</div>
@endforeach
</div>
@else
<h5 class="pt-5">No yearly featured events</h5>
@endif
@if(count($events['monthlies']) > 0)
<div class="row pt-5">
<h3 class="text-dark">Monthly Featured Events</h3>
<a href="monthlyalle" class="btn btn-primary ml-3">View all</a>
</div>
<div class="row2 row pt-2">
@foreach($events['monthlies'] as $monthly)
<div class="col-md-2 py-2">
<div class="card h-100">
<img class="card-img-top h-35" src="/storage/event_images/{{$monthly->event_picture_link}}" alt="Card image cap">
<div class="card-body h-65">
<h5 class="card-title">{{$monthly->name}}</h5>
<p class="card-text">{{$monthly->event_desc_short}}</p>
</div>
<ul class="list-group list-group-flush">
@if ($monthly->event_free === 1)
<li class="list-group-item"><h6 class="font-weight-bold">Free</h6></li>
@else
<li class="list-group-item"><h6 class="font-weight-bold">${{$monthly->event_low_cost}} - ${{$monthly->event_high_cost}}</h6></li>
@endif
</ul>
<div class="card-body text-center h-25 py-auto">
<a href="/events/{{$monthly->id}}" class="card-link stretched-link">View Event</a>
</div>
</div>
</div>
@endforeach
</div>
@else
<h5 class="pt-5">No monthly featured events</h5>
@endif
@if(count($events['weeklies']) > 0)
<div class="row pt-5">
<h3 class="text-dark">Weekly Featured Events</h3>
<a href="monthlyalle" class="btn btn-primary ml-3">View all</a>
</div>
<div class="row pt-2">
@foreach($events['weeklies'] as $weekly)
<div class="col-sm-2 py-2">
<div class="card h-100">
<img class="card-img-top h-25" src="/storage/event_images/{{$weekly->event_picture_link}}" alt="Card image cap">
<div class="card-body h-50">
<h5 class="card-title">{{$weekly->name}}</h5>
<p class="card-text">{{$weekly->event_desc_short}}</p>
</div>
<ul class="list-group list-group-flush">
@if ($weekly->event_free === 1)
<li class="list-group-item"><h6 class="font-weight-bold">Free</h6></li>
@else
<li class="list-group-item"><h6 class="font-weight-bold">${{$weekly->event_low_cost}} - ${{$weekly->event_high_cost}}</h6></li>
@endif
</ul>
<div class="card-body h-25">
<a href="/events/{{$weekly->id}}" class="card-link stretched-link">View Event</a>
@auth
<a href="/" class="card-link float-right">Save</a>
@endauth
</div>
</div>
</div>
@endforeach
</div>
@else
<h5 class="pt-5">No weekly featured events</h5>
@endif
@else
<h5 class="pt-5">No featured event content</h5>
@endif
</div>
</div>
@endsection
Есть некоторые другие проблемы, но я не имею У меня не было много времени для работы над ними, поэтому я не собираюсь публиковать их здесь, пока не поверю, что исчерпал свои способности к развитию.
Любая помощь будет принята с благодарностью.