5 Spalten gleicher Breite im Bootstrap (volle Breite des Containers)

Src Gepostet am Dev

Src

Laut meiner PSD-Vorlage habe ich CONTAINER, der aus 5 Spalten gleicher Breite (344 Pixel) besteht. Ich habe mich für Bootstrap entschieden, was die Reaktionsfähigkeit betrifft. Aber jetzt bin ich mit dieser Aufgabe frustriert.

Gibt es eine Möglichkeit, dies umzusetzen oder ich brauche:

Erstellen Sie meine PSD-Vorlage neu, damit sie zum Bootstrap-Raster und zu den Größen passt
Bootstrap nicht verwenden und benutzerdefinierte Antwortklassen schreiben

Codepen: http://codepen.io/anon/pen/YZbBQG

<div class="cont">
        <div class="bicycles">
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
          <div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
        </div>
    </div>

Zim

Ich würde empfehlen , die automatische Layout mit col-lgSpalten für größere Breiten , so dass Sie sich über 5 haben können, dann skalieren bis auf die Standardgröße Rasterspalten auf md, smetc ..

http://www.codeply.com/go/DVzExqdUZa

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="w-100 hidden-md-down">
               <!--force wrap every 5 on lg-->
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
        <div class="col-md-3 col-sm-4 col-lg">
           ...
        </div>
    </div>
</div>

http://www.codeply.com/go/DVzExqdUZa

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2020-11-5

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:So greifen Sie auf eine Spalte zu, auf deren Namen ich in verketteten Operationen nicht zugreifen kann

TOP Liste

Artikel

5 Spalten gleicher Breite im Bootstrap (volle Breite des Containers)

5 Spalten gleicher Breite im Bootstrap (volle Breite des Containers)

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

Fügen Sie eine weitere Schaltfläche zu gwt Suggest Box hinzu

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

Eclipse Oxygen - Projekte verschwinden

Wie wählt man Unterschiede mit drei Tabellen aus?

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie kann ich den Kaskadenmodus global einstellen?

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Was ist schneller: SUM über NULL oder über 0?

Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

Kann ich ein Tkinter-Canvas erstellen, das mehrere Zeilen in einem Text-Widget umfasst?

Ärgerliches Problem mit yaml, das ich nicht lösen kann