CSS在移动设备上搞砸 - 引导

Question

我在一个引导网站上工作，我必须将宽度屏幕分成5个相等的列，因为Bootstrap不提供5个相同列的功能，所以我创建了自己的，因为它在桌面上运行良好，但在移动设备上搞砸了。我尽力而为，但无法弄清楚这里有什么问题。

以下是代码示例。

<div class="row" style="margin: 0;"> 
    <div class="conatiner-fluid services"> 
     <a href="/applications"> 
      <div class="col-md-5 apps text-center"> 
       <img src="images/home-page-tiles/apps.jpg" class="img-responsive" /> 
       <div class="caption"> 
        <h3> APPLICATIONS</h3> 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 

       </div> 
      </div> 
     </a> 

     <a href="/social"> 
      <div class="col-md-5 apps text-center"> 
       <img src="images/home-page-tiles/social.jpg" class="img-responsive" /> 
       <div class="caption"> 
        <h3> SOCIAL </h3> 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
       </div> 
      </div> 
     </a> 

     <a href="/digital"> 
      <div class="col-md-5 apps text-center"> 
       <img src="images/home-page-tiles/digital.jpg" class="img-responsive" /> 
       <div class="caption"> 
        <h3> DIGITAL </h3> 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
       </div> 
      </div> 
     </a> 

     <a href="/web"> 
      <div class="col-md-5 apps text-center"> 
       <img src="images/home-page-tiles/web.jpg" class="img-responsive" /> 
       <div class="caption"> 
        <h3> WEB </h3> 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
       </div> 
      </div> 
     </a> 

     <a href="/design"> 
      <div class="col-md-5 apps text-center"> 
       <img src="images/home-page-tiles/design.jpg" class="img-responsive" /> 
       <div class="caption"> 
        <h3> DESIGN </h3> 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
       </div> 
      </div> 
     </a> 

    </div> 
</div> 

和CSS的这一部分：

.col-xs-5, 
.col-sm-5, 
.col-md-5, 
.col-lg-5 { 
    position: relative; 
    min-height: 269px; 
    padding: 0; 
} 

.col-xs-5 { 
    width: 20%; 
    float: left; 
} 

@media (min-width: 768px) { 
    .col-sm-5 { 
     width: 20%; 
     float: left; 
    } 
} 

@media (min-width: 992px) { 
    .col-md-5 { 
     width: 20%; 
     float: left; 
    } 
} 

@media (min-width: 1200px) { 
    .col-lg-5 { 
     width: 20%; 
     float: left; 
    } 
} 

.apps { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.caption { 
    text-align: center; 
    position: absolute; 
    top: 55%; 
    -webkit-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.caption h3 { 
    color: #fff; 
    font-family: menuFont; 
    -webkit-font-smoothing: antialiased; 
    margin: 0; 
    text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
    -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
    -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
    -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
} 
.home-page-explore { 
    background-color: transparent; 
    border:1px solid #fff; 
    color:white; 
    border-radius: 0px; 
    margin-top:10px; 

} 
.home-page-explore:hover { 
    background-color: transparent; 
    border:1px solid #fff; 
    color:white; 

} 

移动，标题和按钮移动到左侧和I-PHONE 6和后续机型，标题和按钮不显示所有。

这里是网站对于那些谁希望看到这一问题在实时link

Answer 1

这里是解决方案 - 使用 在DIV上所有类（COL-MD-5 COL-SM-5山坳-xs-5）。

.col-xs-5, 
 
.col-sm-5, 
 
.col-md-5, 
 
.col-lg-5 { 
 
    position: relative; 
 
    min-height: 269px; 
 
    padding: 0; 
 
} 
 

 
.col-xs-5 { 
 
    width: 20% !important; 
 
    float: left; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .col-sm-5 { 
 
     width: 20% !important; 
 
     float: left; 
 
    } 
 
} 
 

 
@media (min-width: 992px) { 
 
    .col-md-5 { 
 
     width: 20% !important; 
 
     float: left; 
 
    } 
 
} 
 

 
@media (min-width: 1200px) { 
 
    .col-lg-5 { 
 
     width: 20% !important; 
 
     float: left; 
 
    } 
 
} 
 

 
.apps { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.caption { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 55%; 
 
    -webkit-transform: translateY(-50%); 
 
    -o-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 

 
.caption h3 { 
 
    color: #fff; 
 
    font-family: menuFont; 
 
    -webkit-font-smoothing: antialiased; 
 
    margin: 0; 
 
    text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
 
    -webkit-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
 
    -moz-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
 
    -o-text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.1); 
 
} 
 
.home-page-explore { 
 
    background-color: transparent; 
 
    border:1px solid #fff; 
 
    color:white; 
 
    border-radius: 0px; 
 
    margin-top:10px; 
 

 
} 
 
.home-page-explore:hover { 
 
    background-color: transparent; 
 
    border:1px solid #fff; 
 
    color:white; 
 

 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row" style="margin: 0;"> 
 
    <div class="conatiner-fluid services"> 
 
     <a href="/applications"> 
 
      <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> 
 
       <img src="images/home-page-tiles/apps.jpg" class="img-responsive" /> 
 
       <div class="caption"> 
 
        <h3> APPLICATIONS</h3> 
 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button > 
 

 
       </div> 
 
      </div> 
 
     </a> 
 

 
     <a href="/social"> 
 
      <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> 
 
       <img src="images/home-page-tiles/social.jpg" class="img-responsive" /> 
 
       <div class="caption"> 
 
        <h3> SOCIAL </h3> 
 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
 
       </div> 
 
      </div> 
 
     </a> 
 

 
     <a href="/digital"> 
 
      <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> 
 
       <img src="images/home-page-tiles/digital.jpg" class="img-responsive" /> 
 
       <div class="caption"> 
 
        <h3> DIGITAL </h3> 
 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
 
       </div> 
 
      </div> 
 
     </a> 
 

 
     <a href="/web"> 
 
      <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> 
 
       <img src="images/home-page-tiles/web.jpg" class="img-responsive" /> 
 
       <div class="caption"> 
 
        <h3> WEB </h3> 
 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
 
       </div> 
 
      </div> 
 
     </a> 
 

 
     <a href="/design"> 
 
      <div class="col-md-5 col-sm-5 col-xs-5 apps text-center"> 
 
       <img src="images/home-page-tiles/design.jpg" class="img-responsive" /> 
 
       <div class="caption"> 
 
        <h3> DESIGN </h3> 
 
        <button type="button" class="btn btn-default home-page-explore hvr-grow-shadow">Explore</button> 
 
       </div> 
 
      </div> 
 
     </a> 
 

 
    </div> 
 
</div>