css - 在小屏幕上没有得到正确的尺寸
问题描述
我在我的应用程序中使用 bootstrap4 和Stream UI Kit作为用户界面,但我没有在小屏幕上获得正确大小的列!
当我们在手机上浏览时,它应该是每行一个!使用 col-md-4 你可以查看演示
<!-- 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 -->
解决方案
您可以将 col-md-4 与设备的所有类一起使用。串联使用它
class="col-6 col-md-4 col-sm-4 col-lg-4 col-xl-4"</p>
这些类本身可以在所有设备上做出响应。col - 设置移动 col-md - 设置中型设备 col-sm - 小 col-lg - 大 col-xl - 超大
他们会自动管理。
推荐阅读
- java - 从每个命名空间的 XML 文件中获取元素 + 标记名称
- cordova - 带有ConnectivityManager的cordova android应用程序中的错误
- javascript - 在 SugarCRM 6.5 中添加带有自定义 JavaScript 的按钮
- list - 使用 LISP 添加到循环中的列表
- react-native - 我如何看到 react-native 的性能下降
- java - Jgit - 从分支获取所有提交
- javascript - Javascript:无法在具有多行的表上获取元素 ID
- django - 在自定义迁移中将模型导入为 `apps.get_model('app_name', 'ModelName')` 的逻辑是什么
- codec - Moviepy,更快地提取剪辑
- java - 多次切换片段时Android App崩溃