与 iPad 相比，为什么计算机上的引导卡显示不同？答案

【问题标题】：Why are the bootstrap cards displaying differently on the computer compared to on an iPad?与 iPad 相比，为什么计算机上的引导卡显示不同？
【发布时间】：2020-05-26 10:43:43
【问题描述】：

我想知道是否有人可以向我解释为什么我网站上的卡片在 iPad 上与桌面上的显示不同。

我还添加到 HTML 文档的开头，告诉它具有 iPad 屏幕的宽度。

我也尝试将显示样式更改为 inline-block，但这并没有解决我的问题。

任何帮助将不胜感激

Bootstrap website on iPad

Boostrap website on Desktop

body {
  font-family :Georgia;
  margin:auto;
  background: #009FFF;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ec2F4B, #009FFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

article{
  text-align: center;
  padding: 15px;
}

.navContainer{
  background-color: #b3b3b3;
  padding-left: 8px;
}

.point {
  font-size: 30px;
  cursor: pointer;
}

.hideNav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;
}

.hideNav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.hideNav a:hover{
  color: #f1f1f1;
}

.hideNav .btnClose {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .hideNav{padding-top: 15px;}
  .hideNav a {font-size: 18px;}
}

.row{
 display: block;

  margin-left: 270px;
  width: 10%;

  
}

.card-block{
background-color: #3C3C3A;
overflow: hidden;
  
  

  border-style: hidden;
  

}
.card-title, .card-text{
  color:white;
}

.abouttitle{
  color: white;
}

【问题讨论】：

标签： html css ipad bootstrap-4

【解决方案1】：

移除宽度：10%；在.row 类

【讨论】：