【发布时间】：2021-07-21 20:43:01
【问题描述】：
我在一行中有 2 列。它工作正常，但在 IPAD 上它没有显示全宽。
我的代码
<div class="row">
<div class="col-xl-8 col-lg-8 col-sm-12">
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Case #:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden"> Ninja Developer</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Contact Number:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.phone}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Address:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.address}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Email:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.email}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-sm-12">
<!--About div starts-->
<div id="about">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Shedule Appoinment</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
DR Micky:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> 7 Feb</span>
</span>
</div>
</div>
<span class="display-block overflow-hidden">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Medication</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="mb-3">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Lisinoril 1 in tab:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> Feb 1, 2020</span>
</span>
</div>
</div>
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Lisinoril 1 in tab:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span> Feb 1, 2020</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
它在所有设备上显示全宽，但在 IPAD 上只留下一些空白，所以我的文本出来了，我需要在其中显示全宽，以便它可以覆盖整个白色区域。 我试着给它这样 col-xl-8 col-lg-8 col-sm-12 但它也不起作用。
【问题讨论】：
标签： html css angular bootstrap-4