-1
我開發了一個網站。在桌面視圖中，響應能夠正常工作，但在不同分辨率下工作正常。使用引導程序在不同分辨率下網站的響應
這裏是我的代碼：
<div class="container">
<section id="ServicesSection">
<div>
<br />
<br />
<br />
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div style="background-color: #3487C2; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<div style="text-align: center; vertical-align: top; color: #ffffff; text-transform: uppercase; font-size: 36px; font-weight: 500; padding: 10px 0px 10px 0px;">
<span class="services">Our Services</span>
</div>
<div class="container-fluid" style="padding-top: 5px;">
<div class="row" style="margin-bottom: 100px;">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="HealthSummary.aspx" class="ServiceClick" id="HealthSummary">
<div style="background-color: #ffffff ;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Wellness score or Health summary</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="HistoricalRecords.aspx" class="ServiceClick" id="HistoricalRecords">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Historical records storing</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="visible-sm clearfix"></div>
<div class="col-sm-1"></div>
</div>
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="ExpertOpinon.aspx" class="ServiceClick" id="ExpertOpinon">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Sharing the data or expert opinion
<br />
(Doctors, Family members, etc..)</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="EmergencyContact.aspx" class="ServiceClick" id="EmergencyContact">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Emergency contact info</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
<div style="text-align: center;" class="row">
<div class="col-sm-1"></div>
<div style="margin: 5px 5px;" class="col-sm-5 left animated fadeInLeft wow">
<a href="Security.aspx" class="ServiceClick" id="Security">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Security</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div style="margin: 5px 5px;" class="col-sm-5 right animated fadeInRight wow">
<a href="Recommendations.aspx" class="ServiceClick" id="Recommendations">
<div style="background-color: #ffffff;padding:25px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<h1 style="color: #3487C2; font-size: 16px; font-weight: bold; text-align: center; font-weight: bold;">Recommendations</h1>
<span style="color: #3487C2; text-align: center; font-weight: bold;">I'm a paragraph. Click here to add your own text and edit me. It's easy
</span>
</div>
</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
</div>
<div class="col-sm-1"></div>
</div>
</section>
</div>
這裏是myplunker https://plnkr.co/edit/1WNj7bl5fqCYu30UKYlf?p=preview
我無法得到在不同的分辨率相同高度的所有框。 我的要求是在所有瀏覽器中以不同分辨率獲取具有相同高度的所有盒子。
你是否認真使用所有內聯的CSS？你在痛苦的世界裏保持着這種狀態 - 你在各處都有填充和保證金 - 我會再次開始親自使用基本引導類 –
爲盒子添加一些固定高度。例如，在每個框中添加'
'並且說'height：250px'。在你的代碼爲什麼差異高度發生是因爲diff內容大小:)快樂編碼 –嗨，@DarrenSweeney，我是初學者的新手，我知道bootstrap的基礎知識，請幫我完成我的任務。 – gopal