mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 20.09.2020 06:43 Benutzername: Passwort: Auto-Login

Thema: Bootstrap Columns unten ausrichten - align bottom vom 24.08.2014


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bootstrap Columns unten ausrichten - align bottom
Autor Nachricht
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 35
Geschlecht: Männlich
Verfasst So 24.08.2014 16:18
Titel

Bootstrap Columns unten ausrichten - align bottom

Antworten mit Zitat Zum Seitenanfang

Folgendes Problem. Ich kriege es nicht wirklich hin, columns in Bootstrap 3 unten auszurichten.
Folgendes möchte ich erreichen.




HTML-Code
Code:
<section id="kontakt">
   <div class="container">
      <div class="row">
         <div class="col-md-5">
            <h2>Text</h2>
         </div>
         <div class="col-md-offset-2  col-md-5">
            <div class="well"></div>
         </div>
      </div>
   </div>
</section>


Aber wie kann ich die columns unten ausrichten? Eine absolute Positionierung kommt hier wohl nicht infrage. Selbst mit display: table-cell; und vertical-align: bottom; habe ich es nicht hingekriegt - solange ich nur eine "min-height" angebe. Wenn ich eine absolute Höhe (height: 690px;) angebe, funktioniert es wohl.

Aber wenn das grid auf kleineren Browserfenstern umgebrochen wird, reichen die 690px nicht mehr aus – Textzeilen und Well werden ja untereinander angezeigt und die Höhe plus Hintergrundbild muss größer werden. Oder ich gebe für alle breakpoints eine absolute Höhe ein? Eleganter wäre es aber, die Umsetzung flexibel zu halten und die Höhe passt sich automatisch an (würde also gerne bei min-height: 690px; bleiben und falls das nicht ausreicht, wird's halt höher).

HILFE! Lächel
  View user's profile Private Nachricht senden
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 35
Geschlecht: Männlich
Verfasst Mo 25.08.2014 11:46
Titel

Antworten mit Zitat Zum Seitenanfang

Funktioniert schon mit display: table-cell .. http://codepen.io/anon/pen/uxehA

Tipp am Rande: Wenn schon Bootstrap, dann besser gleich LESS nutzen und mit den mixins arbeiten.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 35
Geschlecht: Männlich
Verfasst Mo 25.08.2014 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

Danke soweit. Das funktioniert so zwar, aber die Ausrichtung unten ist nicht durch die row und/oder kontakt-id bedingt. Wenn das hintergrundbild und die min-height z.B. für die id "kontakt" hinterlegt ist, sollen die beiden columns eben unten der id "kontakt" ausgerichtet werden.

Code:
@media (min-width: 993px) {

  #kontakt {
    min-height: 400px;
    margin-top: 25px;
    background: #ccc;
    padding: 50px 0px 0px 0px;
  }
  .header,
  .content {
    display: table-cell;
    float: none;
    vertical-align: bottom;
  }
 
}


LESS nutze ich im Projekt schon und arbeite mich da ein. Sprichst du auf bestimmte Mixins an, die mir bei diesem Problem hier helfen würden? Und codepen muss ich mir auch mal anschauen - wusste jetzt nicht wie ich deine Vorlage bearbeiten und hier reinstellen konnte.

Danke soweit schon einmal!
  View user's profile Private Nachricht senden
Morgo

Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 35
Geschlecht: Männlich
Verfasst Mo 25.08.2014 14:44
Titel

Antworten mit Zitat Zum Seitenanfang

Nicht ganz sicher, ob ich alles richtig verstehe. Ich habs mal aktualisiert: http://codepen.io/anon/pen/uxehA (zum editieren einfach forken).
Sicher gibt es auch nochmal elgantere Varianten, aber entspricht dashier deinen Vorstellungen? In Tabellen gibt es übrigens kein min-height. Hier entspricht die Eigenschaft height der Mindesthöhe.

Die Mixins haben nicht direkt was mit deinem Problem zu tun: http://getbootstrap.com/css/#grid-less
  View user's profile Private Nachricht senden
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 35
Geschlecht: Männlich
Verfasst Mo 25.08.2014 17:54
Titel

Antworten mit Zitat Zum Seitenanfang

Auf den ersten Blick scheint das die Lösung zu sein. Ich muss mal schauen, ob da nichts quer schießt, wenn ich es ins Projekt einfüge – mit zig anderen Sections. Aber soweit sieht das richtig aus.

In Codepen kann ich nur nicht sehen, ob es auch responsive funktioniert. Auch dann sollte die Mindesthöhe mit Hintergrundbild bestehen bleiben. Die Columns sollen sich dann nur untereinander schieben. Wie üblich. Aber mit den entsprechenden media-queries und manuell geschriebenen Zeilen, sollte das ja wieder möglich sein? Ich schau mir das später mal genauer an.

Danke soweit!

Morgo hat geschrieben:
In Tabellen gibt es übrigens kein min-height. Hier entspricht die Eigenschaft height der Mindesthöhe.

Die Info ist auch interessant. Das wusste ich noch gar nicht Ooops
  View user's profile Private Nachricht senden
deliciious
Threadersteller

Dabei seit: 15.11.2006
Ort: Essen
Alter: 35
Geschlecht: Männlich
Verfasst Mo 25.08.2014 19:24
Titel

Antworten mit Zitat Zum Seitenanfang

Also mit ein paar Anpassungen in meinem Code (z.B. kein offset für die erste column) und für die media-queries scheint es zu funktionieren. Was ich aber noch nicht hingekriegt habe: Ich würde jetzt gerne die Klassen "col-md-push-x" und "col-md-pull-x" verwenden, damit die Textzeile auf kleinen Browserfenstern UNTER dem Well steht – hier passt es durch den Hintergrund besser. In großen Fenstern sollen die Textzeilen aber weiterhin unten links stehen.

Aber irgendwie haben die Klassen keine Auswirkung. Wegen "display: table-cell"? Kennt jemand einen workaround?
  View user's profile Private Nachricht senden
 
Ähnliche Themen div "bottom" ausrichten funktionier im IE nicht
Fehldarstellung Bootstrap
Bootstrap: Breakpoints reagieren nicht
Bootstrap overflow auto mit % Höhe
Start Bootstrap: Jede Woche neue Tamplates
[CSS] vertical-align: middle
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.