2
我的目標得到一個HTML頁面，看起來像下面對齊三個按鈕，使它們在兩個引導超大屏幕容器
這裏的底部是一個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>正如你所看到的通過運行代碼片段（在屏幕寬度1000px +），當調整屏幕大小時，按鈕會上下晃動。當我調整屏幕大小時，我希望按鈕不要晃動，並且還要讓它們的頂部在jumbotrons的底部附近垂直對齊。我想有這個優雅的CSS解決方案。我會很感激任何提示。
嗯，我的目標是讓按鈕對準jumbotron的底部 – kshikama