Html 角度引导div宽度仅在ipad上不显示完整
我在一行中有两列。它工作正常，但在IPAD上并没有显示全宽 我的代码Html 角度引导div宽度仅在ipad上不显示完整,html,css,angular,bootstrap-4,Html,Css,Angular,Bootstrap 4,我在一行中有两列。它工作正常，但在IPAD上并没有显示全宽 我的代码 <div class="row"> <div class="col-xl-8 col-lg-8 col-sm-12"> <div class="card mb-4"> <div class="card-header"&g
<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，但它也不起作用。只需将第二行更改为下面的，它就会起作用
<div class="col-xl-8 col-lg-12 col-sm-12">