Ik heb een vloeiende lay-out met behulp van Twitter’s bootstrap, waarin ik een rij met twee kolommen heb. De eerste kolom heeft veel inhoud, waarvan ik de span normaal wil vullen. De tweede kolom heeft alleen een knop en wat tekst, die ik onderaan wil uitlijnen ten opzichte van de cel in de eerste kolom.
Dit is wat ik heb:
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------
Dit is wat ik wil:
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
Ik heb oplossingen gezien die de eerste span een absolute hoogte maken en de tweede span relatief ten opzichte daarvan positioneren, maar een oplossing waarbij ik de absolute hoogte van mijn divs niet hoef op te geven, zou de voorkeur hebben. Ik sta ook open voor een volledige heroverweging van hoe hetzelfde effect te bereiken. Ik ben niet getrouwd met dit gebruik van de steiger, het leek me gewoon het meest logisch.
Deze lay-out als een viool:
http://jsfiddle.net/ryansturmer/A7buv/3/
Antwoord 1, autoriteit 100%
Dit is een bijgewerkte oplossing voor Bootstrap 3 (zou echter moeten werken voor oudere versies) die alleen CSS/LESS gebruikt:
http://jsfiddle.net/silb3r/0srp42pb/11/
Je stelt de lettergrootte in op 0 in de rij (anders krijg je een vervelende ruimte tussen de kolommen), verwijder vervolgens de kolomzweven, stel de weergave in op inline-block, re -stel hun lettergrootte in, en dan kan vertical-alignworden ingesteld op alles wat je nodig hebt.
Geen jQuery vereist.
Antwoord 2, autoriteit 71%
Let op: voor gebruikers van Bootstrap 4+, overweeg Christophe’s oplossing(Bootstrap 4 introduceerde flexbox, die zorgt voor een elegantere CSS-only oplossing). Het volgende werkt voor eerdere versies van Bootstrap…
Zie http://jsfiddle.net/jhfrench/bAHfj/voor een werkende oplossing.
//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
var $this = $(this);
$this.css('margin-top', $this.parent().height() - $this.height())
});
Aan de positieve kant:
- in de geest van Bootstrap’s bestaande hulpklassen, heb ik de klasse een naam gegeven
pull-down. - alleen het element dat wordt “naar beneden getrokken” moet worden geclassificeerd, dus…
- …het is herbruikbaar voor verschillende elementtypes (div, span, section, p, etc)
- het wordt redelijk goed ondersteund (alle grote browsers ondersteunen margin-top)
Nu het slechte nieuws:
- het vereist jQuery
- het is niet, zoals geschreven, responsive (sorry)
Antwoord 3, autoriteit 52%
U kunt flex gebruiken:
@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}
Antwoord 4, autoriteit 39%
Je moet een stijl toevoegen voor span6, zoiets als dat:
.row-fluid .span6 {
display: table-cell;
vertical-align: bottom;
float: none;
}
en dit is je viool: http://jsfiddle.net/sgB3T/
5, gezag 20%
Hier is ook een angularjs richtlijn om deze functionaliteit
implementeren
pullDown: function() {
return {
restrict: 'A',
link: function ($scope, iElement, iAttrs) {
var $parent = iElement.parent();
var $parentHeight = $parent.height();
var height = iElement.height();
iElement.css('margin-top', $parentHeight - height);
}
};
}
6, gezag 10%
Stel de ouder om display:flex;en het kind naar margin-top:auto. Dit zal het gehalte kind onderaan de ouderelement plaats, uitgaande van de ouder element uitsteken boven het onderliggende element.
Het is niet nodig om te proberen en het berekenen van een waarde voor margin-topwanneer u een hoogte op uw ouder element of een ander element groter is dan je kind element van belang in uw bovenliggende element.
7, Autoriteit 6%
Op basis van de andere antwoorden hier is een nog beter inspelen versie. Ik maakte wijzigingen ten opzichte van Ivan’s versie te ondersteunen viewports. & Lt; 768px breed en een betere ondersteuning trage venster past de grootte
!function ($) { //ensure $ always references jQuery
$(function () { //when dom has finished loading
//make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
function fixHeader() {
//for each element that is classed as 'pull-down'
//reset margin-top for all pull down items
$('.pull-down').each(function () {
$(this).css('margin-top', 0);
});
//set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function () {
if ($(window).innerWidth() >= 768) {
$(this).css('margin-top', $(this).parent().height() - $(this).height());
}
});
}
$(window).resize(function () {
fixHeader();
});
fixHeader();
});
}(window.jQuery);
8
Nou, ik niet als een van die antwoorden, mijn oplossing van het zelfde probleem was om deze toe te voegen: <div> </div>. Dus in je schema zou er als volgt uit (min of meer), geen veranderingen stijl nodig in mijn geval waren:
-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
| | | +---div---+ |
| content | | | & nbsp; | |
| that | | +---------+ |
| is tall | | +-----div--------+|
| | | |short content ||
| | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
9
.align-bottom {
position: absolute;
bottom: 10px;
right: 10px;
}