2
Я стремлюсь, чтобы получить страницу HTML, который выглядит следующим образомСовместите три кнопки, так что они находятся в нижней части двух Bootstrap JumboTron контейнеров
Вот это 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