CSS versaut auf Handy - Bootstrap

Question

Ich arbeite an einer Bootstrap-Website, wo ich die Breite Bildschirm auf 5 gleiche Spalten teilen muss, wie Bootstrap bietet keine Funktionalität für 5 gleiche Spalten, SO habe ich meine eigene, wie es erstellt funktioniert gut auf dem Desktop, aber es ist auf dem Handy durcheinander. Ich habe mein Bestes versucht, bin aber nicht in der Lage herauszufinden, was hier falsch ist.

Hier ist das Codebeispiel.

<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> 

und die CSS für diesen Abschnitt:

.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; 

} 

On Mobile, Die Überschriften und Tasten auf der linken Seite verschoben und auf der I-PHONE 6 und Modelle, Überschriften und Tasten zeigt nicht an alle.

hier ist die link der Website für diejenigen, die das Problem in Echtzeit

Answer 1

Hier ist die lösungs- Nutzen Sie alle Klassen auf dem div (col-MD-5 col-sm-5 col sehen wollen -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>