1
ブートストラップに新しく、アルファ版のブートストラップ4を使用して、ホームネットワーク用のサイトを作成しました。サイドバーの全長を取得するにはどうすればいいですか？
サイドバーがページの左側全体を埋めるようにしたいのですが、上部のナビゲーションバーの下から開始します。今のところ、上部ナビゲーションバーとサイドバーの間に20ピクセルほどの小さなピクセルギャップがあります。私はまた、ページの大きさにもかかわらず、それをずっと続けておきたい。
私はブートストラップからadminテンプレートを使用していて、自分のニーズに合わせて修正しました。
https://jsfiddle.net/ced6ee78/
CSS：body上
body, html {
height: 100%;
}
body {
padding-top: 70px;
}
/* BrandName Top Navbar */
.so-navbar-top {
background-color: #087ca7;
height: 48px;
}
.so-navbar-top .navbar-brand {
font-size: 1.5em;
}
.so-navbar-top .nav-item {
font-size: 0.75em;
}
/* BrandName Sidebar */
.so-sidebar {
background-color: #13293d;
}
/* workaround modal-open padding issue */
body.modal-open {
padding-right: 0 !important;
}
#sidebar {
padding-left:0;
}
/*
* Off Canvas at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 48em) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-block .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-block .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/brandname/css/style.css" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/jquery-ui/jquery-ui.min.js"></script>
<title>Dashboard | BrandName</title>
</head>
<body>
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light bg-fade mb-3 so-navbar-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-row d-flex">
<a class="navbar-brand mb-1" href="#" title="ServiceOps">BrandName</a>
<button type="button" class="hidden-md-up navbar-toggler" data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-bell-o"></i><span class="badge badge-pill badge-danger">1</span> Alerts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-cog"></i> Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-user"></i> Profile
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-sign-out"></i> Logout
</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas so-sidebar" id="sidebar" role="navigation">
<ul class="nav flex-column pl-1">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Sites</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Item 2</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-9 col-lg-10 main">
<!--toggle sidebar button
<p class="hidden-md-up">
<button type="button" class="btn btn-primary-outline btn-sm" data-toggle="offcanvas"><i class="fa fa-chevron-left"></i> Menu</button>
</p>-->
<h1 class="display-2 hidden-xs-down">Dashboard</h1>
<div class="row mb-3">
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-success">
<div class="card-block bg-success">
<div class="rotate">
<i class="fa fa-user fa-5x"></i>
</div>
<h6 class="text-uppercase">Users</h6>
<h1 class="display-1">134</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-danger">
<div class="card-block bg-danger">
<div class="rotate">
<i class="fa fa-list fa-4x"></i>
</div>
<h6 class="text-uppercase">Posts</h6>
<h1 class="display-1">87</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-info">
<div class="card-block bg-info">
<div class="rotate">
<i class="fa fa-twitter fa-5x"></i>
</div>
<h6 class="text-uppercase">Tweets</h6>
<h1 class="display-1">125</h1>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6">
<div class="card card-inverse card-warning">
<div class="card-block bg-warning">
<div class="rotate">
<i class="fa fa-share fa-5x"></i>
</div>
<h6 class="text-uppercase">Shares</h6>
<h1 class="display-1">36</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p class="text-right small">©2017 BrandName</p>
</footer>
</body>
</html>
Sweet！これにより上部のギャップがなくなりますが、ページがフルスクリーンよりも短いにもかかわらず、サイドバーを全長にするにはどうすればよいですか？ – SPLDev
その部分はあなたのjsfiddleに従って既に動作しているようです。トップのナビゲーションから始まり、フッターで終了します。 フッターを重複しますか？ – AJMaxwell
ここをクリックしてください：http://imgur.com/a/Da6cDフッターで停止します。ブラウザウィンドウの一番下まで移動する必要があります。必要があれば、フッターを下に押しても構いません。 – SPLDev