html - 让侧边栏覆盖内容而不是将其推到一边？手机屏幕上的按钮不见了

标签 html css overlay sidebar

你好，我正在做一个元素。我正在使用来自 StartBootstrap 的边栏模板我在移动设备上遇到了一些问题。我有一个触发侧边栏的按钮，在移动设备上，一旦侧边栏被切换，按钮就会消失，因为它会转移所有内容。如何让按钮始终位于侧边栏的边缘(以便于打开/关闭)？

可以测试一下Here在我的实时页面上。将您的窗口宽度设置为移动设备的宽度，您将看到问题。

侧边栏 CSS:

/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

 body {
    overflow-x: hidden;
 }

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 300px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -300px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: white;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 300px;
    }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 300px;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: -300px;
    }
}

我的 HTML:

<head>
    <!-- META TAGS -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Enable iOS web app formatting -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="translucent black">
    <meta name="appl-mobile-web-app-title" content="Vamp Weather">


    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- FONT AWESOME -->
    <script src="https://use.fontawesome.com/c60112b331.js"></script>

    <!-- TAB TITLE -->
    <title>Weather App</title>


    <!-- CSS -->
    <link href="weather.css" type="text/css" rel="stylesheet">
    <link href="simple-sidebar.css" type="text/css" rel="stylesheet">

    <!-- iOS web app icon -->
    <link href="Images/ios10-weather-app-icon.png" rel="apple-touch-icon">

    <!-- iOS web app splash screen -->
    <link href="" rel="apple-touch-startup-image">

</head>

<body>

<div id="wrapper">
    <!-- Sidebar courtesy of StartBootstrap.com -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav text-center sidebar-nav-fixed" style="color:white;">
                <li class="sidebar-brand">
                    <a href="#">
                        Weather Display Options
                    </a>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8" style="margin-right: -50px">
                            Celsius
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Units_Switch" type="checkbox">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8" style="margin-right: -50px">
                            Actual Temperature
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Actual_Switch" type="checkbox" checked="checked">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8" style="margin-right: -50px">
                            Feels Like Temperature
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Feels_Like_Switch" type="checkbox">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8 " style="margin-right: -50px">
                            Humidity
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Humidity_Switch" type="checkbox" checked="checked">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8 " style="margin-right: -50px">
                            Cloud Coverage
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Cloud_Switch" type="checkbox" checked="checked">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-8 " style="margin-right: -50px">
                            Experimental Feature
                        </div>
                        <div class="col-xs-4" style="margin-right: -20px">
                            <label class="switch">
                                <input id="Experimental_Switch" type="checkbox">
                                <div class="slider round"></div>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                </li>
                    <button id="apply_settings" class="btn btn-block btn-primary" style="margin-top: 20px">Apply Settings</button>
            </ul>

        </div>
        <!-- /#sidebar-wrapper -->

<!-- Page Content -->



    <!-- content -->
    <div id="page-content-wrapper">
        <!-- sidebar toggle button -->
        <button id="sidebar_button"
                style="margin: 10px 0px 0px 10px; border: none; outline: none; background: none; color: white;
             text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 1px 1px yellow, -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">
            <i id="button_icon" class="fa fa-caret-right fa-2x"></i>
        </button>
        <div class="container-fluid" style="margin-top: 50px">
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div id="jumbotron" class="jumbotron" style="background-color: rgba(0,0,0,0.2)">
                        <div id="loading_div" class="text-center" style="align-content: center; justify-content: center"></div>
                        <div id="conditions_row" class="row text-center" style="color:white;">
                            <div id="location"></div>
                            <div>
                                <img id="condition_icon" src="" style="">
                            </div>
                            <div id="condition_text"></div>
                            <div id="temperature"></div>
                            <div id="feels_like_temperature"></div>
                            <div id="humidity"></div>
                            <div id="cloud_coverage"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- // end main container -->
    </div> <!-- // end page content -->
</div> <!-- // end wrapper -->







<!-- SCRIPT CODE BELOW THIS LINE -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery UI -->
<script
        src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"
        integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="
        crossorigin="anonymous">

</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="weather.js"></script>

</body>
</html>

最佳答案

我终于自己修好了。

添加了以下媒体查询和 padding-left 更改以适应按钮。 

 /* added media queries for smaller screens to display button properly on sidebar toggle */

@media(min-width:480px) {
    #wrapper {
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 330px;
    }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 300px;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: -300px;
    }

}

@media(min-width:320px) {
    #wrapper {
        padding-left: 0;
    }

    #wrapper.toggled {
        padding-left: 330px;
    }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 300px;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: -300px;
    }

}

关于html - 让侧边栏覆盖内容而不是将其推到一边？手机屏幕上的按钮不见了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43311298/

上一篇：HTML，调整浏览器大小时停止页面上的元素移动

下一篇：javascript - 单击超链接时如何重定向到服务器上的另一个页面？

相关文章：

iphone - 在 iPhone/iPad Safari 键盘中显示 'Search' 按钮

jquery - 如何在 DataTables 表的 <td> 内嵌套 2 行？

php - 在 ob_end_flush() 之前和标题之前需要样式表(位置 : ), 如何？

android - 在 Android 2.3 中通过锁屏显示带有触摸事件的对话框

javascript - 在屏幕中间叠加位置和淡入淡出

android - Android 上的覆盖屏幕

javascript - 如果等于特定文本，则在页面上显示图像

html - 在 chrome 和 firefox 中渲染不同

javascript - 自动打开显示模式

jquery - 如何在当前页面之外的菜单链接上创建鼠标悬停效果？

©2024 IT工具网  联系我们