CSS col-lg-7 und der Platz

E

Emskerla

Gast

• 17. März 2017

• #1

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

 

NullPointer

Lt. Commander

Registriert

Okt. 2009

Beiträge

1.570

• 17. März 2017

• #2

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.

 

E

Emskerla

Gast

• 17. März 2017

• #3

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.

 

failormooNN

Lieutenant

Registriert

März 2013

Beiträge

966

• 17. März 2017

• #4

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: 17. März 2017

Midnight Sun

Commander

Registriert

Feb. 2014

Beiträge

2.446

• 17. März 2017

• #5

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

 

E

Emskerla

Gast

• 18. März 2017

• #6

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 …

 

Midnight Sun

Commander

Registriert

Feb. 2014

Beiträge

2.446

• 18. März 2017

• #7

Guck nach, dann weißt du es

Und selbst wenn nicht, die 5 Spalten bekommst du dennoch, mit dem was ich verlinkte habe.

 

E

Emskerla

Gast

• 30. Juni 2017

• #8

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

Zum Vergrößern anklicken....

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?

 

Midnight Sun

Commander

Registriert

Feb. 2014

Beiträge

2.446

• 4. Juli 2017

• #9

sm-6 md-5-5 lg-1-5

Zum Vergrößern anklicken....

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/

 

ayngush

Lt. Commander

Registriert

Okt. 2007

Beiträge

1.986

• 5. Juli 2017

• #10

Emskerla schrieb:

Ist das wirklich immer Bootstrap, wenn man etwas wie col-lg-3 col-md-3 col-sm-6 col-xs-12 sieht?

Zum Vergrößern anklicken....

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: 5. Juli 2017