WernerK: Bootstrap Spaltenbreite passt sich nicht an

Hallo,

ich habe noch nicht viel mit Bootstrap gearbeitet. Ich möchte gerne ein dreispaltiges Layout, wo man in der ganz rechten Spalte Bilder hochlädt. In der mittleren Spalte sollen sie dann bearbeitet werden und ganz links das Endergebnis.

Ich habe das mit "<div class="col-md-6">" und zweimal <div class="col-md-3"> versucht. Jetzt gibt es aber innerhalb diesen noch Divs die eine feste Breite haben sollen.

Ich habe hier mal ein Beispiel gemacht:

https://www.bootply.com/RTFUNOBhcH

Irgendwie scheint Bootsrap sich nicht dem Inhalt anzupassen, bzw. die Spalten sind eigentlich zu schmal.

Was kann man da machen?

Gruss Werner

  1. Tach!

    Ich habe das mit "<div class="col-md-6">" und zweimal <div class="col-md-3"> versucht. Jetzt gibt es aber innerhalb diesen noch Divs die eine feste Breite haben sollen.

    Damit überschreibst du, was Bootstrap festgelegt hat. Bootstrap arbeitet bei den Spaltenbreiten mit Prozentwerten, gemäß seinem Grid-Konzept.

    Irgendwie scheint Bootsrap sich nicht dem Inhalt anzupassen, bzw. die Spalten sind eigentlich zu schmal.

    Bootstrap legt mit seinem 12-Spalten-Grid fest, wie die Aufteilung sein soll. Feste Werte in Pixeln widersprechen dem Grid-Gedanken.

    Was kann man da machen?

    Das Grid verstehen, oder es nicht verwenden, wenn du feste Werte haben möchtest. Die sind dann aber auch nicht responsiv.

    dedlfix.

    1. Hallo,

      ok, verstanden.

      Was bietet sich dann aber an wenn man z.b. Bilder hochlden möchte oder die per Drag & Drop in solch einen Container ziehen möchte? Das Bild ist z.b. 600 x 370 px breit. Die Spalte von Bootstrap mit meiner Einteilung aber nur 380px breit (zumindest zeigt es das im Inspektor so an)

      Gruss

      Werner

      1. Hej WernerK,

        Was bietet sich dann aber an wenn man z.b. Bilder hochlden möchte oder die per Drag & Drop in solch einen Container ziehen möchte? Das Bild ist z.b. 600 x 370 px breit.

        Zeige sie nur so breit an, wie das Elternelement (vermutlich 100% abzüglich border und padding)

        Marc

      2. Tach!

        Was bietet sich dann aber an wenn man z.b. Bilder hochlden möchte oder die per Drag & Drop in solch einen Container ziehen möchte?

        Ich hätte da als Ideen: abschneiden, oder kleinskalieren, oder eine andere Aufteilung des Inhalts bei kleinen Viewports, also dass Inhalte untereinander stehen statt nebeneinander bei zu kleinem Platz, oder du machst die Randspalten kleiner.

        dedlfix.