Question

因此，我使用的是新的Bootstrap 4.1，但无法显示滚动条。页面加载时，它不够大，不需要任何滚动条，但是用户进行了一些搜索，并且在显示结果时，页面比窗口大。您可以滚动，但是没有滚动条可供查看。我尝试使用overflow-y: scroll，但不起作用。

当内容超过窗口的垂直大小时，如何使页面显示滚动条？

<body>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <a class="navbar-brand" href="#">BRAND</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search" id="searchInput" aria-label="Search">
                <div class="dropdown">
                    <button class="btn btn-outline-info my-2 my-sm-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span id="searchType">All</span>
                    <span class="caret"></span></button>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                        <a class="dropdown-item" href="#">Option 1</a>
                        <a class="dropdown-item" href="#">Option 2</a>
                        <a class="dropdown-item" href="#">Option 3</a>
                    </div>
                </div>
                &nbsp;
                <button class="btn btn-outline-success my-2 my-sm-0" id="searchButton" type="submit">Search</button>
            </form>
        </div>
    </nav>

    <main role="main">

        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron JumboHeaderImg">
            <div class="container">
                <h1 class="display-3">MAIN JUMBOTRON TEXT</span></h1>
                <p class="jumboTextStyle">SECONDARY JUMBOTRON TEXT</p>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <!-- Left Column with navbar search results  -->
                <div class="col-md-6">
                   Blah, blah, blah
                </div>
                <!-- Right column with details of item chosen from left column -->
                <div class="col-md-6" id="detailsContainer" style="display:none">
                    <h2>Details</h2>
                    <span class="detailsTable"></span>
                </div>
            </div>

            <hr>

        </div> <!-- /container -->
    </main>

    <!-- Custom Script -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script src="js/script.js" type="text/javascript"></script>

</body>

Answer 1

好的，所以我认为这是浏览器/计算机的问题。我有一个更新/关闭，当我回到页面时，滚动条开始自动出现。在尝试显示滚动条方面，我没有更改代码，但是看来已经解决了。

感谢所有调查此事的人。

当内容超出窗口范围时，在Bootstrap 4中显示滚动条

1 个答案: