- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在尝试使用 bootstrap、一堆示例和其他在线作品来实现可切换的侧边栏(如在短形式侧边栏和长形式侧边栏之间切换)。
侧边栏在切换时改变宽度,我希望内容出现在它旁边,尽管它是“长”或“短”。
我在每个页面上使用一个部分,并希望每个部分在屏幕上显示为全宽(如 so )
$(document).ready(function() {
$("#sidebarCollapse").click(function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass('active');
});
});
$("#aboutbutton").click(function() {
$('html, body').animate({
scrollTop: $("#aboutDiv").offset().top
}, 2000);
});
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 0.1em;
font-weight: 300;
line-height: 1.7em;
color: #3498db;
}
a,
a:hover,
a:focus {
color: inherit!important;
text-decoration: none!important;
transition: all 0.3s;
}
.wrapper {
display: flex;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #2980b9;
color: #ecf0f1;
transition: all 0.3s;
height: 100%;
min-height: 100vh;
position: fixed;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.6em;
display: block;
text-align: left;
}
#sidebar ul li a:hover {
color: #ecf0f1;
background: #3498db;
}
#sidebar .active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar .active i {
font-size: 1em;
}
#sidebar .active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #ecf0f1;
background: #3498db;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #ecf0f1;
}
#sidebarCollapse {
width: 100%;
height: 80%;
background: #2980b9;
padding: 20px 0;
font-size: 1.6em;
display: block;
border: 0;
}
#sidebarCollapse-wrapper {
padding-top: 5%;
padding-bottom: 5%;
}
#sidebarCollapse span {
width: 30%;
height: 2px;
margin: 0 auto;
display: block;
background: #fff;
transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}
#sidebarCollapse span:first-of-type {
/* rotate first one */
transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
/* second one is not visible */
opacity: 0;
}
#sidebarCollapse span:last-of-type {
/* rotate third one */
transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
/* no rotation */
transform: none;
/* all bars are visible */
opacity: 1;
margin: 5px auto;
}
section {
min-height: 100vh;
height: 100vh;
box-sizing: border-box;
display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>José Gomes - Website</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- in your header -->
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>
<body>
<!-- Content will go here -->
<div class="wrapper">
<!-- Sidebar -->
<nav class="sidebar-nav" data-spy="affix" id="sidebar">
<!-- Sidebar Header -->
<div id="sidebarCollapse-wrapper">
<button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Home</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> Page2</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Page3</a></li>
</ul>
</nav>
</div>
<!-- Page Content -->
<div id="content container-fluid p-0">
<div class="d-flex flex-column">
<section class="p-3 p-lg-5 content-page" id="Section1">
Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
</section>
<section class="p-3 content-page">
Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
</section>
<section class="p-3 content-page">
Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
</div>
</div>
</div>
这是上面代码的jsfiddle
我尝试了内容包装器并为内容类设置了边距,但它仍然将内容向下推到侧边栏下方或内部。
最佳答案
是这样的吗?
$(document).ready(function() {
$("#sidebarCollapse").click(function() {
$("#sidebar").toggleClass("active");
$(this).toggleClass('active');
});
});
$("#aboutbutton").click(function() {
$('html, body').animate({
scrollTop: $("#aboutDiv").offset().top
}, 2000);
});
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 0.1em;
font-weight: 300;
line-height: 1.7em;
color: #3498db;
}
a,
a:hover,
a:focus {
color: inherit!important;
text-decoration: none!important;
transition: all 0.3s;
}
.wrapper {
display: flex;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #2980b9;
color: #ecf0f1;
transition: all 0.3s;
height: 100%;
min-height: 100vh;
position: fixed;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.6em;
display: block;
text-align: left;
}
#sidebar ul li a:hover {
color: #ecf0f1;
background: #3498db;
}
#sidebar .active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar .active i {
font-size: 1em;
}
#sidebar .active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #ecf0f1;
background: #3498db;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #ecf0f1;
}
#sidebarCollapse {
width: 100%;
height: 80%;
background: #2980b9;
padding: 20px 0;
font-size: 1.6em;
display: block;
border: 0;
}
#sidebarCollapse-wrapper {
padding-top: 5%;
padding-bottom: 5%;
}
#sidebarCollapse span {
width: 30%;
height: 2px;
margin: 0 auto;
display: block;
background: #fff;
transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}
#sidebarCollapse span:first-of-type {
/* rotate first one */
transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
/* second one is not visible */
opacity: 0;
}
#sidebarCollapse span:last-of-type {
/* rotate third one */
transform: rotate(-45deg) translate(1px, -1px);
}
#sidebarCollapse.active span {
/* no rotation */
transform: none;
/* all bars are visible */
opacity: 1;
margin: 5px auto;
}
.sidebar-nav.active + div#content{
margin-left:80px;
}
.sidebar-nav:not(.active) + div#content{
margin-left:250px;
}
section {
min-height: 100vh;
height: 100vh;
box-sizing: border-box;
display: flex;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.1/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/js/mdb.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>José Gomes - Website</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="css/mdb.min.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- in your header -->
<link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/df6431e323547add1b4cf45992913f15286456d3/devicon.min.css">
</head>
<body>
<!-- Content will go here -->
<!-- Sidebar -->
<nav class="sidebar-nav" data-spy="affix" id="sidebar">
<!-- Sidebar Header -->
<div id="sidebarCollapse-wrapper">
<button type="button" id="sidebarCollapse" class="navbar-btn waves-effect waves-light">
<span></span>
<span></span>
<span></span>
</button>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active waves-effect waves-light" id="aboutbutton"><a href="#"><i class="fa fa-user-circle" aria-hidden="true"></i> Home</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-briefcase" aria-hidden="true"></i> Page1
</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-cogs" aria-hidden="true"></i> Page2</a></li>
<li class="waves-effect waves-light"><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Page3</a></li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" class="p-0">
<div class="d-flex flex-column">
<section class="p-3 p-lg-5 content-page" id="Section1">
Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST - Section 1 TEST -
</section>
<section class="p-3 content-page">
Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST - Section 2 TEST -
</section>
<section class="p-3 content-page">
Section 3 TEST - Section 3 TEST - Section 3 TEST - Section 3 TEST</section>
</div>
</div>
</div>
关于html - 可变宽度的固定侧边栏旁边的流动内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47314904/
目前我找到的最佳解决方案是: http://jsfiddle.net/kizu/UUzE9/ 但事实并非如此。你看,我有三列;其中两个需要避免明确调整大小。好吧,第二个确实需要调整大小;但不完全是。
假设我们有两种类型和它们的联合: type A = {tag: 'a'}; type B = {tag: 'b'}; type U = A | B; 以及返回 A 或 B 的函数,具体取决于提供的标签
我有四个 div。 div 2 是 div 1 高度的一半,div 3 & 4 是 div 2 高度的一半。 在大显示器上 div 的位置很好: ---------------- ----------
要使用 display: block 居中元素,人们使用 margins: auto。如果我将 max-width 设置为需要居中的子项,并且它周围有足够的空间,它将根据需要尽可能多地流动到 max-
我试图获得的效果是在 bootstrap 中使用列从左到右文本流动的位置。在第一个部分的第十二列之后,我想换行,希望代码能让它更清晰。
我知道固定列可以在 X 轴和 Y 轴上溢出'。我还在某处读到,如果您将其中一个轴设置为自动/滚动,则另一组将继承前一个轴的行为,除非它被设置为 hidden。 我的困境是:我有一个固定的列
我基本上想要这个: ----------------------------------------------------------------- |
我正在尝试构建一个由三个主要 block 组成的移动就绪设计,广告 block 、内容 block 和侧边栏 block (加上页眉和页脚,但这些对于这个问题并不重要)。 想法是让广告和侧边栏具有固定
我正在关注这个guide上传照片。代码工作正常,但 flowtype 会告诉我有一个错误:调用方法“append”。不能在交集类型交集的任何成员上调用函数 出现错误后,流程不会传递该代码是有道理的,因
通过研究引用应用程序和阅读手册,我对 Spring WebFlow 2.1 有了第一印象。在进一步讨论之前,我想问一下对这个社区的印象。 实际上,我计划我的网站只包含一个网页。其他所有内容(登录/注销
我不确定为什么,但我得到这个文本显示/流动在 之外标签。我认为这与 float 有关,但我已经尝试了所有我知道的解决方案来修复它,但它们都没有奏效。 这是 jsfiddle(我在 Safari 中)
典型的 ISP 设置。一台服务器是 Web 服务器,另一台是 DB SQL 服务器。在两台计算机上创建了一个本地管理员帐户(假设为 XYZ)。因此,当我远程登录时,我要么是 WebServer\XYZ
我无法理解 IE7 中的 float 问题。我 div 包含一个向右浮动的列表,以便文本保持在左侧。我使用的方法在其他浏览器中有效,但在 IE7 中无效。我简化了代码以使问题更清楚:
我有两个街区。其中一个呈三 Angular 形。如何围绕这个 div 文本流动?例子: HTML: Triangle Lorem ipsum dolor sit a
我在网上搜索过,似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。 我希望有 3 列布局,左列固定为 200px,右列固定为 200px,中间列为剩余宽度,但最小宽度为 600px。所以整体最
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this q
我是一名优秀的程序员,十分优秀!