CSS col-lg-7 und der Platz

E

Emskerla

Gast
Liebe Gemeinschaft,

bei (WordPress)-Templates habe ich häufig das Problem, dass Spalten zu schmal sind. Beispiel: 4 nebeneinander stehende Bilder mit Bildunterschriften sind mit col-lg-3 col-md-3 col-sm-6 col-xs-12 definiert. Kommt ein fünftes hinzu, reicht der Platz nicht mehr aus. Bild Nummer 5 steht plötzlich alleine in einer neuen Zeile, was sehr unschön aussieht. Definiert man also col-lg-2, sind die Bilder nicht mehr zentiert und zu klein.

Wie lässt sich so ein Problem ganz allgemein lösen?

HTML:
.col-xs-7 {
  float: left;
  min-width: 992px;
}

.col-sm-7
{
  float: left;
  min-width: 992px;
}

.col-md-7 {
  float: left;
  min-width: 992px;
}

.col-lg-7{
  float: left;
  min-width: 992px;
}

Das obige ist halt ein unschöner und gefährlicher Hack. Schraubt man an den columns rum, ist die Gefahr halt auch groß, dass man an anderer Stelle was kaputt macht.

Vielen Dank im Voraus
 
Wenn ich dich richtig verstanden habe, dann möchtest du, dass die Bilder immer in einer Zeile und dort sauber zentriert angezeigt werden, egal wie viele es sind. Das ist mit einem Grid-System leider nicht machbar - dabei ist ja gerade das Prinzip, dass der horizontal verfügbare Platz in (meist 12) virtuelle Spalten aufgeteilt wird. Die Elemente, die sich diesen Platz teilen, belegen dann eine oder mehrere dieser Spalten. Drei, vier oder sechs Elemente lassen sich gleichmäßig auf 12 Spalten verteilen, bei fünf Elementen spielt die Mathematik leider nicht mit :)

TLDR: Ich empfehle dir, mal Flexbox anzuschauen. Das ist wesentlich besser darin, Elemente gleichmäßig zu verteilen.
 
Vielen Dank!

Dass das ganz grundsätzlich nicht möglich ist, ist schon mal eine Aussage: Ich hatte gestern versucht, Dinge wie 2.5 einzugeben.

Verwendet man Flexbox, sattelt also ein neues "System" drauf, wird es schnell aufwendig: Bezeichnungen, Inhalte, Bilder werden ja auch an anderer Stelle verwendet. Dann ist man schnell mal 12 Stunden, dafür das man 5 Bilder in einer Reihe hat. Das kauft einem niemand mehr ab. :-(

Flexbox kann ja auch nicht verwendet werden, wenn die Spalten auf der ganzen Seite (also generell und nicht nur bei Bildern) zu schmal sind. Dann ändert man wieder col-lg und an anderer Stelle geht was kaputt.
 
Eine Möglichkeite wäre, dass Du dein eigenes Grid-System schreibst
oder das aktuelle erweiterst.
Dann könntest Du deine individuellen Wünsche berücksichtigen.
 
Zuletzt bearbeitet:
Du verwendest Bootstrap und hier musst du in der CSS (custom.css) definieren, dass du 5 Spalten verwenden möchtest.
Siehe hier: http://www.bootply.com/jfbRPE8X9M
 
Ist das wirklich immer Bootstrap, wenn man etwas wie col-lg-3 col-md-3 col-sm-6 col-xs-12 sieht?

Ich kann mal versuchen, nur für diesen einen Bereich die Spaltenanzahl zu ändern …
 
Guck nach, dann weißt du es ;)

Und selbst wenn nicht, die 5 Spalten bekommst du dennoch, mit dem was ich verlinkte habe.
 
Dragon Sun schrieb:
Du verwendest Bootstrap und hier musst du in der CSS (custom.css) definieren, dass du 5 Spalten verwenden möchtest.
Siehe hier: http://www.bootply.com/jfbRPE8X9M

Mit col-sm-6 col-md-1-5 col-lg-2-5 bekomme ich jeweils zwei Bilder nebeneinander – was bei 5 Bildern blöd ist, da dann das letzte alleine da steht:

XX
XX
X

Leute, dieses Grid-System ist für mich ein Buch mit sieben Siegeln! Vorschlag: Alle Bilder einfach untereinander. Wie realisiere ich das mit diesem System?
 
sm-6 md-5-5 lg-1-5
musst du für 5 Bilder in einer Reihe nutzen.

Das ist Bootstrap und sehr einfach aufgebaut, du musst dir halt einen Teil raussuchen und dich damit beschäftigen, wenn dir alles zusammen zu viel ist. Schau vielleicht hier mal rein: http://holdirbootstrap.de/
 
Emskerla schrieb:
Ist das wirklich immer Bootstrap, wenn man etwas wie col-lg-3 col-md-3 col-sm-6 col-xs-12 sieht?

Nein: http://flexboxgrid.com/
Aber es ist "in der Regel" Bootstrap.

PS: Das Bildproblem...:

Code:
<style>
div.pics { text-align: center; max-width: 1024px; width: 100%; }
div.pics img {margin: 1em; display: inline-block; }
</style>

<div class="pics">
<img>
<img>
<img>
</div>

Grüße
 
Zuletzt bearbeitet:
Zurück
Oben