wie man img-list machen bleibt auf einer linie in desktop aber auf mobilen geräten drop

Ich habe einige schwierigkeiten, eine reaktionsfähige liste von bildern. Meine Ziele sind:wie man img-list machen bleibt auf einer linie in desktop aber auf mobilen geräten drop

Auf Desktop-Auflösungen 1000px und größer:
- ich eine Zeile von Bildern muß die nie Wraps und Bilder immer fit. Ich kann erreichen, dass mit diesem:

HTML

<div id="partners" class="col-md-6"> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    <div class="logo-image"> 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
    </div> 
    </div>

CSS

#partners { 
    background-color: #eee; 
    white-space: nowrap; 
    width: 100%; 
    display: table; 
} 

.logo-image { 
    vertical-align: middle; 
    display: table-cell; 
    border: solid 1px #F00; 
} 

.logo-image img { 
    max-width: 100%; 
} 
@media (min-width:1000px) { 
#partners { 

} 

.logo-image { 

} 
}

Auf kleineren Bildschirmen:
- die Blöcke fallen nach unten (reaktions)

Aber als Benutzer diese Seite auf mobile Geräte Zugriff auf diese Blöcke kleiner werden. Also habe ich versucht, das Bild behalten normale Größe dann Drop-Down durch Entfernen der Partner CSS, wenn der Bildschirm width ist etwas weniger als 1000px, aber das scheint nicht zu funktionieren.

@media (max-width:1000px) { 
    #partners { 

    } 

    .logo-image { 

    } 
    }

hier ist mein fiddle

Ich habe bisher die ganze Woche versucht und Latein am Ende, an diesem Punkt bin ich nicht sicher, dass es getan werden kann.

Quelle

2016-04-26 NeoSketo

Sie verwenden, können Sie einfach die display: block; machen das Inline-Anzeige zu entfernen.

Überprüfen Sie den aktualisierten Code hier:

#partners { 
 
    background-color: #eee; 
 
    white-space: nowrap; 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.logo-image { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    border: solid 1px #F00; 
 
} 
 

 
.logo-image img { 
 
    max-width: 100%; 
 
} 
 
@media (max-width:1000px) { 
 
#partners { 
 
    
 
} 
 

 
.logo-image { 
 
float:left; 
 
} 
 
}

<div id="partners" class="col-md-6"> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    <div class="logo-image"> 
 
     <img src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    </div>

Quelle

2016-04-26 16:31:05

das funktioniert gut, aber ich versuche nur, es voll bootstrap reagiert nach der Breite ist weniger als 1000px. Beispielsweise; Wenn die Breite 970px beträgt, kann sie mindestens 3 in einer Reihe passen und den Rest ablegen. – NeoSketo

geben Sie eine Breite und verwenden Sie display: Inline-Block "statt Block :) versuchen und aktualisieren Sie mich, wenn es funktioniert –

und dann upvote und markieren Sie diese und als korrekt: D –

hier ist eine vereinfachte Version der Fiddle, nur float:left/none

#partners { 
 
    background-color: #eee; 
 
} 
 
img { 
 
    float: left; 
 
    border: solid 1px red !important; 
 
} 
 
@media (max-width: 1000px) { 
 
    img { 
 
    float: none; 
 
    display:block; 
 
    margin:auto 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div id="partners" class="col-xs-12 col-md-12"> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
     <img class="img-responsive" src="http://placehold.it/120x80" alt="Placeholder Image" /> 
 
    </div> 
 
    </div>

Quelle

2016-04-26 16:26:59 dippas

das einzige Problem dabei ist, dass es nach unten fällt, wenn Breite größer als 1000px ist. So wie ich es brauchte, um eine Zeile und Bilder zu halten, um diese eine Zeile für Desktop-Auflösungen zu füllen. – NeoSketo

Ok, dann kannst du die Klassen von 'col-md-6' nach' col-md-12' ändern, wenn du ein Framework verwendest, hack es nicht, benutze die Eigenschaften, die es hat :) – dippas

@NeoSketo Ive aktualisiert die Antwort, werfen Sie einen Blick – dippas

wie man img-list machen bleibt auf einer linie in desktop aber auf mobilen geräten drop

Antwort

Verwandte Themen