Mobile Ansicht für Abschnitt sieht komisch aus

Ich habe Probleme, herauszufinden, Mobile-Layout-Problem. Wenn ich meine Website über ein Handy ansehe, verkleinert sich der Bereich entsprechend, anstatt das Bild in voller Breite anzuzeigen und gestapelt zu werden. Wie repariere ich es, damit die Boxen bei der Betrachtung über das Handy übereinander liegen? Ich benutze Bootstrap.Mobile Ansicht für Abschnitt sieht komisch aus

<section class="health" id="health"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="section-title st-center"> 
          <h3>Places to exercise</h3> 
         </div> 
         <div class="grid"> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2><span>EAST COAST PARK</span></h2> 
            <p>Long stretch of running and cycling/skating paths, it’s one of Singapore’s best spots to go jogging or bike riding.</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
          <figure class="portfolio-item"> 
           <img src="images/eastcoastpark.jpg" alt="east coast park"/> 
           <figcaption> 
            <h2>Nice <span>Lily</span></h2> 
            <p>Lily likes to play with crayons and pencils</p> 
           </figcaption> 
          </figure> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section>

Quelle

2016-05-10 xtjnrchris

.health { padding: 2em; } .grid Abbildung { Position: relativ; Schwimmer: links; Überlauf: versteckt; Textausrichtung: Mitte; Cursor: Zeiger; Breite: 33,33333333%; } .grid Abbildung img { Position: relativ; Anzeige: Block; min-Höhe: 100%; max-Breite: 100%; Opazität: 1; -Webkit-Übergang: Opazität 0,3 s, -Webkit-Transformation 0,3 s kubisch-Bezier (0,645, 0,045, 0,355, 1); Übergang: Opazität 0,3 s, Transformation 0,3 s kubisch-Bezier (0,645, 0,045, 0,355, 1); } – xtjnrchris

Eer, vielen Dank für Ihre CSS, aber bitte fügen Sie es in den eigentlichen Fragetext und nicht als Kommentar - einige Leute werden nicht so weit lesen, und Kommentare können sehr leicht verloren gehen. – Serlite

Es könnte sein, dass Sie die Figur oder ein beliebiges anderes Element hat das Bild in einem festen hieght verschachtelt ist, können Sie in CSS beheben, die mit height: auto;

Quelle

2016-05-10 15:00:21 Simon

Hallo, ich habe 100% für maximale Höhe verwendet. Es wurde automatisch geändert, aber immer noch der gleiche Fehler angezeigt. .grid Zahl { Position: relativ; Schwimmer: links; Überlauf: versteckt; Textausrichtung: Mitte; Cursor: Zeiger; Breite: 33,33333333%; } .grid Abbildung img { Position: relativ; Anzeige: Block; min-Höhe: 100%; max-Breite: 100%; } – xtjnrchris

Der beste Weg dies zu tun wäre, col-span zu jedem der Bilder hinzuzufügen, zum Beispiel col-span-4 auf drei Bildern zu verwenden, um es ihnen zu ermöglichen, gut gegeneinander im Desktop zu stapeln, aber dann in der mobilen Ansicht würde automatisch aufgrund der Standard css fallen

  <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/1.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/2.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/3.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
      <a class="thumbnail" href="#"> 
       <img class="img-responsive" src="assets/img/gallery/4.jpg" alt=""> 
      </a> 
     </div>

Quelle

2016-05-10 15:01:20 Phil

Mobile Ansicht für Abschnitt sieht komisch aus

Antwort

Verwandte Themen