| Autor |
Nachricht |
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht: 
|
Verfasst So 24.08.2014 16:18
Titel Bootstrap Columns unten ausrichten - align bottom |
  |
|
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! 
|
|
| |
  |
 |
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Mo 25.08.2014 11:46
Titel
|
|
|
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.
|
|
| |
|
|
|
Anzeige
|
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Mo 25.08.2014 14:04
Titel
|
|
|
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!
|
|
| |
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Mo 25.08.2014 14:44
Titel
|
|
|
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
|
|
| |
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Mo 25.08.2014 17:54
Titel
|
|
|
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 
|
|
| |
|
|
deliciious
Threadersteller
Dabei seit: 15.11.2006
Ort: Essen
Alter: 39
Geschlecht:
|
Verfasst Mo 25.08.2014 19:24
Titel
|
|
|
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?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
div "bottom" ausrichten funktionier im IE nicht
Fehldarstellung Bootstrap
Bootstrap overflow auto mit % Höhe
Bootstrap: Breakpoints reagieren nicht
Start Bootstrap: Jede Woche neue Tamplates
DIV align=center in CSS
|
|
Willkommen auf dem Portal für Mediengestalter
