当程序使用过程中 div 的大小可变时，如何防止 bootstrap 崩溃使 div 重叠
JSFiddle - https://jsfiddle.net/silkpuma/fb1gqxh5/#&togetherjs= Pt1jA1Ri2K
当使用引导折叠时，我的 div 大小可能会改变。这导致我的 div 重叠。我尝试对程序的每个部分使用一个带有行的容器，我不想重叠，但是当我的修复 div 由于引导崩溃而变大时，它会与我的下一个元素重叠。我尝试改变位置，但当大小改变时没有什么可以阻止重叠。
<body style="background-color: #e5e5e5">
<div class="container-fluid" style="background-color: #e5e5e5">
<div class="row">
<div style="height: 100vh; margin: 0 -15px 0 -15px; background-image: url('assets/bg.jpg');" class="bg-image">
<nav class="navbar navbar-expand-sm navbar-light bg-light " >
<div class="container-fluid" style="background-color: transparent !important;">
<a class="navbar-brand" href="#">iRepair</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div style="background-color: transparent !important;" class="collapse navbar-collapse " id="navbarSupportedContent" >
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#repair">Repair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#purchase">Purchase</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#location">Location</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="tel:+15404215581">(540)421-5581</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="background-color: transparent !important; padding-top: 24px" class="text-center position-absolute top-50 start-50 translate-middle" >
<h1>iRepair</h1>
<h5 style="margin-bottom: 24px">Harrisonburg's original professional Phone & PC Repair Shop.</h5>
<a style="margin-right: 8px" class="btn btn-outline-dark" href="#repair">Repair</a>
<a class="btn btn-outline-dark" href="#purchase">Purchase</a>
</div>
</div>
</div>
<div class="row">
<div id="repair" class="container" style=" padding-top: 24px; height: 50vh; text-align: center" >
<h1>Device Repair</h1>
<p></p>
<h5 style="padding-bottom: 96px">All your electronics are welcome! We have the tool and expertize your device needs.</h5>
<!-- device repair option-->
<div class="d-flex justify-content-center row img-fluid panel-group" >
<div class="card-formatting card col-md-4 col-6" style="align-items: center" >
<img class="img-fluid img-size card-img-top" src="assets/iphone/iphone13.png" alt="...">
<div class="card-body">
<button onclick="location.href='#iphoneRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#iphoneRepair" aria-expanded="false" aria-controls="collapseExample">
iPhone Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6" style="align-items: center">
<img class="img-fluid img-size card-img-top" src="assets/iPad/ipadPro2021.png" alt="...">
<div class="card-body">
<button onclick="location.href='#ipadRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#ipadRepair" aria-expanded="false" aria-controls="collapseExample">
iPad Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center" >
<img class="card-img-top img-fluid img-size" src="assets/Android/s21.png" alt="...">
<div class="card-body">
<button onclick="location.href='#AndroidRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#AndroidRepair" aria-expanded="false" aria-controls="collapseExample">
Android Phone Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center" >
<img class="card-img-top img-fluid img-size" src="assets/Android/galaxyTab.webp" alt="...">
<div class="card-body">
<button onclick="location.href='#AndroidTabletRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#AndroidTabletRepair" aria-expanded="false" aria-controls="collapseExample">
Android Tablet Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center">
<img class="card-img-top img-size img-fluid " src="assets/Macbook/macbookTop.png" alt="...">
<div class="card-body">
<button onclick="location.href='#PcRepair'" class="nav-link btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#PcRepair" aria-expanded="false" aria-controls="collapseExample">
Mac/PC Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center">
<img class="card-img-top img-fluid img-size" src="assets/watch/appleWatch.png" alt="...">
<div class="card-body">
<button onclick="location.href='#WatchRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#WatchRepair" aria-expanded="false" aria-controls="collapseExample">
Smart Watch Repair
</button>
</div>
</div>
</div>
<!--DevicesInterface show hide panels-->
<div style="height: 50vh" class="container-fluid" id="chooseDevice">
<!-- iPhone Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="iphoneRepair">
<h1 style="padding-bottom: 96px">Select iPhone</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let iphone of iphones" >
<div class="card-formatting-devices card col-6 col-md-3 text-center" >
<img src="{{iphone.deviceImg}}" class="img-product-details card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + iphone.repairId">
{{iphone.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class="img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#iphoneRepair" style="padding-bottom: 20vh" id="{{iphone.repairId}}">
<h3 class="card-title " style="padding: 48px 0 48px 0;">{{iphone.deviceName}} Repair Cost: <p style="font-size: medium">Select the repair you are interested in to schedule an appointment!</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of iphone.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{iphone.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!-- Ipad Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="ipadRepair">
<h1 style="padding-bottom: 96px">Select iPad</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let ipad of ipads" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{ipad.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + ipad.repairId">
{{ipad.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#ipadRepair" style="padding-bottom: 20vh" id="{{ipad.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{ipad.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of ipad.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{ipad.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--
ANDROID PHONE REPAIR
-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="AndroidRepair">
<h1 style="padding-bottom: 96px">Select Phone</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let android of androidPhones" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{android.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + android.repairId">
{{android.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#AndroidRepair" style="padding-bottom: 20vh" id="{{android.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{android.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of android.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{android.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--
ANDROID Tablet REPAIR
-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="AndroidTabletRepair">
<h1 style="padding-bottom: 96px">Select Tablet</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let androidTablet of androidTablets" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{androidTablet.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + androidTablet.repairId">
{{androidTablet.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#AndroidTabletRepair" style="padding-bottom: 20vh" id="{{androidTablet.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{androidTablet.deviceName}}</h3>
<div class="row justify-content-center">
<div *ngFor="let repair of androidTablet.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my android tablet repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--Mac/PC Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="PcRepair">
<h1 style="padding-bottom: 96px">Select Computer</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let computer of computers" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{computer.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + computer.repairId">
{{computer.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#PcRepair" style="padding-bottom: 20vh" id="{{computer.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{computer.deviceName}}</h3>
<div class="row justify-content-center">
<div *ngFor="let repair of computer.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my computer repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--Watch Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="WatchRepair">
<h1 style="padding-bottom: 96px">Select Watch</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let watch of watches" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{watch.deviceImg}}" class="img-product-details card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + watch.repairId">
{{watch.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#WatchRepair" style="padding-bottom: 20vh" id="{{watch.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{watch.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of watch.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="annoying-imgs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{watch.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="text-center row " style="padding-top: 75vh">
<div id="purchase" >
<h3>Devices for Sale</h3>
<br>
<p>Looking for a quality used phone? Look no further than iRepair! We sell new and quality used phones and iPads. Devices in stock are available for immediate pickup.</p>
<p>Looking for something we don't have listed? We can order certain devices just for you!</p>
<p>With unbeatable prices and service, choose us for your next Smart device!</p>
<p>Call us today to see if we have the iPhone, iPad, Android, or computer you are searching for!</p>
</div>
<div style="margin-top: 160px" id="aboutUs">
<h3>About Us</h3>
<p>We are a locally owned and operated iPhone repair shop that started back in 2014. We have qualified technicians that are
happy to assist you and repair your device</p>
</div>
<div style="margin-top: 160px" id="contact">
<h3>Contact</h3>
<p>Have a question? Need help? Get in touch with us by calling, stopping by</p>
<p></p>
<p></p>
<div class="justify-content-evenly">
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
</div>
<div class="position-relative" style="margin-top: 160px" id="location">
<h3>Location</h3>
<div class=" mapouter" style="">
<!-- position-absolute top-75 start-50-->
<iframe width="100%" height="500px" id="gmap_canvas" src="https://maps.google.com/maps?q=924%20S%20High%20St,%20Harrisonburg,%20VA%2022801&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<!-- <style>.mapouter{text-align:center;height:350px;width:350px;}</style>-->
</div>
</div>
</div>
</div>
</div>
</body>
JSFiddle - https://jsfiddle.net/silkpuma/fb1gqxh5/#&togetherjs=Pt1jA1Ri2K
When using bootstrap collapse my div sizes can change. This leads to my divs then overlapping. I tried using a container with row for each section of my program that I don't want to overlap but when my repair div gets larger due to bootstrap collapse it overlaps my next element. I tried changing positions but nothing would prevent then from overlapping when the size changes.
<body style="background-color: #e5e5e5">
<div class="container-fluid" style="background-color: #e5e5e5">
<div class="row">
<div style="height: 100vh; margin: 0 -15px 0 -15px; background-image: url('assets/bg.jpg');" class="bg-image">
<nav class="navbar navbar-expand-sm navbar-light bg-light " >
<div class="container-fluid" style="background-color: transparent !important;">
<a class="navbar-brand" href="#">iRepair</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div style="background-color: transparent !important;" class="collapse navbar-collapse " id="navbarSupportedContent" >
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#repair">Repair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#purchase">Purchase</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutUs">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#location">Location</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="tel:+15404215581">(540)421-5581</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="background-color: transparent !important; padding-top: 24px" class="text-center position-absolute top-50 start-50 translate-middle" >
<h1>iRepair</h1>
<h5 style="margin-bottom: 24px">Harrisonburg's original professional Phone & PC Repair Shop.</h5>
<a style="margin-right: 8px" class="btn btn-outline-dark" href="#repair">Repair</a>
<a class="btn btn-outline-dark" href="#purchase">Purchase</a>
</div>
</div>
</div>
<div class="row">
<div id="repair" class="container" style=" padding-top: 24px; height: 50vh; text-align: center" >
<h1>Device Repair</h1>
<p></p>
<h5 style="padding-bottom: 96px">All your electronics are welcome! We have the tool and expertize your device needs.</h5>
<!-- device repair option-->
<div class="d-flex justify-content-center row img-fluid panel-group" >
<div class="card-formatting card col-md-4 col-6" style="align-items: center" >
<img class="img-fluid img-size card-img-top" src="assets/iphone/iphone13.png" alt="...">
<div class="card-body">
<button onclick="location.href='#iphoneRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#iphoneRepair" aria-expanded="false" aria-controls="collapseExample">
iPhone Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6" style="align-items: center">
<img class="img-fluid img-size card-img-top" src="assets/iPad/ipadPro2021.png" alt="...">
<div class="card-body">
<button onclick="location.href='#ipadRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#ipadRepair" aria-expanded="false" aria-controls="collapseExample">
iPad Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center" >
<img class="card-img-top img-fluid img-size" src="assets/Android/s21.png" alt="...">
<div class="card-body">
<button onclick="location.href='#AndroidRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#AndroidRepair" aria-expanded="false" aria-controls="collapseExample">
Android Phone Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center" >
<img class="card-img-top img-fluid img-size" src="assets/Android/galaxyTab.webp" alt="...">
<div class="card-body">
<button onclick="location.href='#AndroidTabletRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#AndroidTabletRepair" aria-expanded="false" aria-controls="collapseExample">
Android Tablet Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center">
<img class="card-img-top img-size img-fluid " src="assets/Macbook/macbookTop.png" alt="...">
<div class="card-body">
<button onclick="location.href='#PcRepair'" class="nav-link btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#PcRepair" aria-expanded="false" aria-controls="collapseExample">
Mac/PC Repair
</button>
</div>
</div>
<div class="card-formatting card col-md-4 col-6 text-center">
<img class="card-img-top img-fluid img-size" src="assets/watch/appleWatch.png" alt="...">
<div class="card-body">
<button onclick="location.href='#WatchRepair'" class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" data-bs-target="#WatchRepair" aria-expanded="false" aria-controls="collapseExample">
Smart Watch Repair
</button>
</div>
</div>
</div>
<!--DevicesInterface show hide panels-->
<div style="height: 50vh" class="container-fluid" id="chooseDevice">
<!-- iPhone Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="iphoneRepair">
<h1 style="padding-bottom: 96px">Select iPhone</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let iphone of iphones" >
<div class="card-formatting-devices card col-6 col-md-3 text-center" >
<img src="{{iphone.deviceImg}}" class="img-product-details card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + iphone.repairId">
{{iphone.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class="img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#iphoneRepair" style="padding-bottom: 20vh" id="{{iphone.repairId}}">
<h3 class="card-title " style="padding: 48px 0 48px 0;">{{iphone.deviceName}} Repair Cost: <p style="font-size: medium">Select the repair you are interested in to schedule an appointment!</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of iphone.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{iphone.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!-- Ipad Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="ipadRepair">
<h1 style="padding-bottom: 96px">Select iPad</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let ipad of ipads" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{ipad.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + ipad.repairId">
{{ipad.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#ipadRepair" style="padding-bottom: 20vh" id="{{ipad.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{ipad.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of ipad.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{ipad.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--
ANDROID PHONE REPAIR
-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="AndroidRepair">
<h1 style="padding-bottom: 96px">Select Phone</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let android of androidPhones" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{android.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + android.repairId">
{{android.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#AndroidRepair" style="padding-bottom: 20vh" id="{{android.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{android.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of android.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{android.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--
ANDROID Tablet REPAIR
-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="AndroidTabletRepair">
<h1 style="padding-bottom: 96px">Select Tablet</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let androidTablet of androidTablets" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{androidTablet.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + androidTablet.repairId">
{{androidTablet.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#AndroidTabletRepair" style="padding-bottom: 20vh" id="{{androidTablet.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{androidTablet.deviceName}}</h3>
<div class="row justify-content-center">
<div *ngFor="let repair of androidTablet.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my android tablet repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--Mac/PC Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="PcRepair">
<h1 style="padding-bottom: 96px">Select Computer</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let computer of computers" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{computer.deviceImg}}" class="annoying-imgs card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + computer.repairId">
{{computer.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#PcRepair" style="padding-bottom: 20vh" id="{{computer.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{computer.deviceName}}</h3>
<div class="row justify-content-center">
<div *ngFor="let repair of computer.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="card-img-repairs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my computer repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
<!--Watch Repair-->
<div class="px-lg-5 collapse justify-content-center row dropdown img-fluid" data-bs-parent="#chooseDevice" style=" padding-top: 48px" id="WatchRepair">
<h1 style="padding-bottom: 96px">Select Watch</h1>
<!-- Iteration for device-->
<ng-container *ngFor="let watch of watches" >
<div class="card-formatting-devices card col-6 col-md-3 text-center">
<img src="{{watch.deviceImg}}" class="img-product-details card-img-top" alt="...">
<div class="card-body">
<button class="btn card-text stretched-link" type="button" data-bs-toggle="collapse" [attr.data-bs-target]="'#' + watch.repairId">
{{watch.deviceName}}
</button>
</div>
</div>
<!-- REPAIR DATA-->
<div class=" img-fluid repair-info-div card-formatting-devices collapse justify-content-center" data-bs-parent="#WatchRepair" style="padding-bottom: 20vh" id="{{watch.repairId}}">
<h3 class="card-title " style="padding-bottom: 48px; padding-top: 24px">{{watch.deviceName}} Repair Cost: <p style="font-size: medium">Select repair</p></h3>
<div class="row justify-content-center">
<div *ngFor="let repair of watch.repair" class="card-formatting-repairs card col-md-6 col-lg-4 col-12 text-center">
<img src="{{repair.repairImg}}" class="annoying-imgs card-img-top img-fluid " alt="...">
<div class="card-body ">
<h5 class="card-title">{{repair.repairTitle}} {{repair.repairPrice}}</h5>
<p>{{repair.repairDetails}}</p>
<a class="btn"><a class="nav-link active stretched-link" aria-current="page" href="sms:+15404215581&body=Hi! I would like to get my {{watch.deviceName}} {{repair.repairTitle}} repaired. Can I schedule an appointment?"></a></a>
</div>
</div>
</div>
<p></p>
<p></p>
<div class="justify-content-evenly">
<h3 style="padding-bottom: 16px">Schedule your service!</h3>
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
<hr style="background-color: black; margin-top: 24px">
</div>
</ng-container>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="text-center row " style="padding-top: 75vh">
<div id="purchase" >
<h3>Devices for Sale</h3>
<br>
<p>Looking for a quality used phone? Look no further than iRepair! We sell new and quality used phones and iPads. Devices in stock are available for immediate pickup.</p>
<p>Looking for something we don't have listed? We can order certain devices just for you!</p>
<p>With unbeatable prices and service, choose us for your next Smart device!</p>
<p>Call us today to see if we have the iPhone, iPad, Android, or computer you are searching for!</p>
</div>
<div style="margin-top: 160px" id="aboutUs">
<h3>About Us</h3>
<p>We are a locally owned and operated iPhone repair shop that started back in 2014. We have qualified technicians that are
happy to assist you and repair your device</p>
</div>
<div style="margin-top: 160px" id="contact">
<h3>Contact</h3>
<p>Have a question? Need help? Get in touch with us by calling, stopping by</p>
<p></p>
<p></p>
<div class="justify-content-evenly">
<button style="margin-right: 8px; font-size: large" class="btn btn-outline-secondary"><a class="nav-link active" aria-current="page" href="tel:+15404215581">Call</a></button>
<button style=" font-size: large" class="btn btn-outline-dark"><a class="nav-link active" aria-current="page" href="sms:+15404215581">Text</a></button>
</div>
</div>
<div class="position-relative" style="margin-top: 160px" id="location">
<h3>Location</h3>
<div class=" mapouter" style="">
<!-- position-absolute top-75 start-50-->
<iframe width="100%" height="500px" id="gmap_canvas" src="https://maps.google.com/maps?q=924%20S%20High%20St,%20Harrisonburg,%20VA%2022801&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
<!-- <style>.mapouter{text-align:center;height:350px;width:350px;}</style>-->
</div>
</div>
</div>
</div>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论