wie man 8 gerade Spalten in Bootstrap 3 ohne Rinne erstellt

8

Ich versuche, eine benutzerdefinierte Zeile zu erstellen, die 8 Logos in geraden Spalten am unteren Rand einer Seite hat, wenn sie auf dem Desktop in voller Größe sitzt (lg) Ich brauche sie, um in Antwort zu arbeiten.

Ich habe ein paar Optionen ausprobiert - 2 Spalten mit 4 Spalten verschachtelt und 4 Spalten mit 2 Spalten verschachtelt ... das Problem, das ich habe, ist die Rinne schafft zusätzlichen Abstand zwischen den Spalten, was bedeutet, dass die Logos nicht gleichmäßig Platz. Irgendwelche Experten haben eine bessere Idee, wie ich 8 Logos gleichmäßig in einer Reihe platzieren könnte? vielleicht ein neues 8 col benutzerdefiniertes Gitter erstellen?

Jede Hilfe wäre großartig.

Danke N

    
Neek 30.10.2013, 08:46
quelle

5 Antworten

7

2 Spalten 6 mit je 4 Spalten 3 innerhalb der Zeilenflüssigkeit

%Vor%     
pbenard 30.10.2013 10:06
quelle
7

Bootstrap 3

Wie wäre es mit einem list-inline mit 4 Spalten von 2 wie folgt ..

%Vor%

Demo: Ссылка

Bootstrap 4

Da Bootstrap 4 flexbox ist, ist jetzt eine beliebige Anzahl von Spalten mit gleicher Breite möglich, indem Sie auto verwenden -Gitterraster ..

%Vor%

Demo: Ссылка

    
ZimSystem 30.10.2013 10:01
quelle
3

Erweitere meine Antwort hier: Ссылка

Hier ist eine Demonstration einer acht breiten Bootstrap-Zeilenstruktur mit

Gleiche Abstände (d. h. Spaltenrinnen) ...

%Vor%

... oder gar keine Spaltenrinnen.

%Vor%

Dieses CSS wird zusätzlich zu Bootstrap benötigt

%Vor%

Hier ist eine funktionierende Demo:
Ссылка



Und das Logo zentriert

Um die Logos zu positionieren, verwende ich entweder <img class="img-responsive"> oder wenn sie kleiner als die Spaltenbreite sind, könnten Sie CSS mit text-align:center zentrieren (oder die Bootstrap-Klasse text-center auf der% co_de platzieren) %) oder mit folgendem CSS:

%Vor%     
Francis Booth 29.07.2014 19:29
quelle
0

Klingt so, als wäre dies ein bestimmtes Modul, also würde ich einfach ein einfaches neues Gitter dafür erstellen ...

%Vor%     
Sir Kettle 30.10.2013 09:32
quelle
0

Es ist einfach ... Fügen Sie einfach eine weitere Spalte zu Ihrem CSS hinzu.
Es ist am besten, Bootstrap-CSS nicht zu bearbeiten (und eine CDN zu verwenden).

Also ... Wir müssen die Spalte css für alle Bildschirmtypen erstellen.
Ich adressiere normalerweise 3 Bildschirmgrößen, was bedeutet, 3 CSS-Sätze für diese Spalte zu erstellen.

  1. große Bildschirme & amp; normale Bildschirme
  2. mittlere Bildschirme (ipad ext.)
  3. kleine Bildschirme (Mobiltelefone ext.)

Entscheidungszeitpunkt:
Da wir über 8 Spalten sprechen, ist das eine Menge es ist am besten, mit diesen CSS-Regeln (meiner Meinung nach)

zu gehen

ich verwende fast immer eine .container-klasse für meine designs, die
macht den Großbildmodus im Tablet-Modus geeignet, außer im Hochformat.

Kurz gesagt, hier sind eine gute Reihe von CSS-Regeln

%Vor%

Bitte beachten Sie:
Ich spiele mit Padding herum, wie ich es für richtig halte. Es ist am besten, wenn Sie im mobilen Modus einige zusätzliche Polsterung lassen, aber Sie können damit herumspielen;)

    
Sagive SEO 11.01.2016 23:39
quelle