2
ich dem Ziel bin eine HTML-Seite zu erhalten, die hier wie folgtAlign drei Tasten, so dass sie an der Unterseite sind zwei Bootstrap Jumbotron Container
aussieht, ist ein MVCE
function resizeJumbotronToHaveEqualHeights() {
var elements = $(".js-cap-jumbotron")
var max_height = _.max(_.map(elements, function (element) { return $(element).height() }))
_.map(elements, function (element) { $(element).height(max_height) })
}
function positionButtonsTowardsBottom() {
var buttons = $(".js-cap-jumbotron-bottom")
_.map(buttons, function(element) {
var button = $(element)
var parentContainer = button.parents(".js-cap-jumbotron")
var siblingContainer = button.siblings(".upper-cap-jumbotron")
var childContainers = _.toArray(button.parentsUntil(".js-cap-jumbotron"))
var newTop = $(parentContainer).outerHeight()
childContainers.forEach(function(container) {
newTop -= $(container).position().top
})
newTop -= button.outerHeight(true);
newTop -= siblingContainer.outerHeight(true);
button.css({ "margin-top": newTop + "px" })
})
}
const onWindowResize = function() {
const width = $(window).width();
console.log(width)
if (width > 992) {
var elements = $(".js-cap-jumbotron")
elements.css('height', 'auto');
resizeJumbotronToHaveEqualHeights()
positionButtonsTowardsBottom()
} else {
var elements = $(".js-cap-jumbotron")
elements.css('height', 'auto');
var buttons = $(".js-cap-jumbotron-bottom")
buttons.css({"margin-top": "auto"})
}
};
var throttledOnWindowResize = _.throttle(onWindowResize, 100, {leading: false})
window.onresize = function(event) {
throttledOnWindowResize()
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="js-cap-jumbotron jumbotron">
<div class="row js-cap-jumbotron-inside">
<div class="col-md-6">
<div class="upper-cap-jumbotron">
<h3>Lorem Ipsum 1</h3>
<p class="cap-jumbotron-paragraph">Lorem ipsum dolor sit amet.</p>
</div>
<input class="js-cap-jumbotron-bottom" />
</div>
<div class="col-md-6">
<div class="upper-cap-jumbotron">
<h3>Lorem Ipsum 2</h3>
<p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
</div>
<button class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="js-cap-jumbotron jumbotron">
<div class="js-cap-jumbotron-inside">
<div class="upper-cap-jumbotron">
<h3>Lorem Ipsum 3</h3>
<p class="cap-jumbotron-paragraph">Text of arbitrary length</p>
</div>
<button class="js-cap-jumbotron-bottom btn btn-lg btn-default">Submit 2</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Wie Sie sehen können, indem Sie das Snippet (bei Bildschirmbreite 1000px +), wackeln die Tasten rauf und runter, wenn ich die Größe des Bildschirms ändere. Ich möchte, dass die Tasten nicht wackeln, wenn ich die Größe des Bildschirms ändere und dass ihre Oberseiten in der Nähe der Unterseite der Jumbotrons vertikal ausgerichtet sind. Ich kann mir vorstellen, dass es elegante CSS-Lösungen dafür gibt. Ich würde mich über irgendwelche Tipps freuen.
Nun mein Ziel ist es, die Tasten in Richtung der Unterseite des Jumbotron ausgerichtet haben – kshikama