个人中心
gpt4 book ai didi

javascript - 对齐三个按钮，使它们位于两个 Bootstrap Jumbotron 容器的底部

转载 作者：太空宇宙 更新时间：2023-11-04 14:58:37 25 4
gpt4 key购买 nike

我的目标是获得如下所示的 HTML 页面

Goal

这是一个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+)所见，当我调整屏幕大小时按钮会上下抖动。我希望按钮在调整屏幕大小时不会晃动，并且它们的顶部在超大屏幕底部附近垂直对齐。我想对此有优雅的纯 CSS 解决方案。如果有任何提示，我将不胜感激。

最佳答案

我不太确定您的目标是什么，但是可以使用 Bootstrap 的网格布局来实现两个超大屏幕，一个是两个按钮，另一个是一个按钮。

enter image description here 

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-6"><p>Text</p></div>
                    <div class="col-md-6"><p>Text</p></div>
                </div>
                <div class="row">
                    <div class="col-md-6"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
                    <div class="col-md-6"><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="jumbotron">
                <p>Text</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>
    </div>

</div>

再修改

关于javascript - 对齐三个按钮，使它们位于两个 Bootstrap Jumbotron 容器的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37777245/

25 4 0
文章推荐： java - 如何使用较低版本重新编译第 3 方 jar
文章推荐： c++ - 在 C++ 中进行类型转换
文章推荐： html - 将 td 与表的其他 td 中的第一个元素对齐
文章推荐： java - 如何调用在另一个线程中运行的程序的关闭钩子(Hook)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com