0
こんにちは私は私が取り組んでいるプロジェクトを持っています。私は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>
ライブページをリンクするだけでスピニング/読み込み....... – repzero
ロケーションサービスを有効にする必要があります – vampiire