從 Bootstrap 調整 Jumbotron 元素的大小以適應屏幕的寬度？

Question

所以我在我的網站上使用這個 jumbotron 實例，我想根據文檔使用 jumbotron 流體，以便調整我的整個 jumbotron 的大小/適合屏幕寬度。 但由於某種原因我不能增加它的寬度。

下面是我的代碼

 $(".jumbotron").css({ height: $(window).height() + "px" }); $(window).on("resize", function() { $(".jumbotron").css({ height: $(window).height() + "px" }); }); $(".form-control").click(function(){ $(this).prev().val(""); document.getElementById("inzone").style.display = 'block'; document.getElementById("outzone").style.display = 'block'; });

 .jumbotron { color: white; background-image: url("picture link"); background-position: 100% 100%; background-repeat: no-repeat; background-size: cover; height: 100vh; }.wrap{ width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="jumbotron jumbotron-fluid"> <div class="container"> <div class="wrap"> <div style="text-align: center;"><label style="font-weight:bold;">Select your location to find best offers available:</label></div> <div class="form-froup"> <div class="input-icons"> <i class="fa fa-search icon"></i> <input type="search" class="form-control" id="search_input" placeholder="Enter Area Name" /> </div> </div> </div> </div> </div>

Answer 1

我認為這段代碼可能對您有所幫助。 我使用一個大的灰色盒子作為 Jumbotron。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        .jumbotron{
            position: relative;
            top: 200px;
            height: 300px;
        }
        .wrap{
            width: 60%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>

<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <div class="wrap">
            <div style="text-align: center;"><label style="font-weight:bold;">Select your location to find best offers available:</label></div>
            <div class="form-froup">
                <div class="input-icons">
                    <i class="fa fa-search icon"></i>
                    <input type="search" class="form-control" id="search_input" placeholder="Enter Area Name" />
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(".jumbotron").css({ height: $(window).height() + "px" });

    $(window).on("resize", function() {
        $(".jumbotron").css({ height: $(window).height() + "px" });
    });
    $(".form-control").click(function(){
        $(this).prev().val("");
        document.getElementById("inzone").style.display = 'block';
        document.getElementById("outzone").style.display = 'block';

    });
</script>

</body>
</html>

從 Bootstrap 調整 Jumbotron 元素的大小以適應屏幕的寬度？

問題描述

1 個解決方案

解決方案1
0 2020-09-01 14:18:21

從 Bootstrap 調整 Jumbotron 元素的大小以適應屏幕的寬度？

問題描述

1 個解決方案

解決方案1 0 2020-09-01 14:18:21

解決方案1
0 2020-09-01 14:18:21