- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
当我在移动设备上查看此站点或缩小浏览器大小直到 xs 网格生效时,展开的可折叠菜单链接(在“RESIDENTIAL”下方)被幻灯片 div 覆盖。有没有简单的解决方法?我这辈子都破解不了。
站点示例:http://parkerrichard.com/studiogreen/html/process.html
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Studio Green</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap custom CSS -->
<link href="css/custom.css" rel="stylesheet">
<!-- Typekit custom fonts -->
<script src="//use.typekit.net/bcn3ife.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link href="css/flexslider.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
<!-- custom icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/flexslider-icon.eot">
</head>
<body>
<!-- row 1: static navbar -->
<nav class="navbar navbar-default navbar-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a>
</div><!-- navbar toggle -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="process.html">PROCESS</a></li>
<li><a href="office.html">OFFICE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div><!--/nav-collapse -->
</div><!-- container -->
</nav><!-- navbar -->
<!-- row 2: body -->
<div class="container">
<div class="row centered">
<!-- sidebar -->
<aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<li class="active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
RESIDENTIAL
</li>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul>
<li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
<li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">2</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">3</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">4</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">5</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">6</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">7</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">8</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">9</span></a></li>
<li><a href="project-01.html">PROJECT <span class="spaced">10</span></a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="schools.html">
SCHOOLS
</a>
</h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="parks.html">
PARKS
</a>
</h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a href="hospitality.html">
HOSPITALITY
</a>
</h4>
</div>
</div> <div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
ELEMENTS
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<ul>
<li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li>
<li><a href="plants.html">ENTRY</a></li>
<li><a href="plants.html">FENCES</a></li>
<li><a href="plants.html">FIRE</a></li>
<li><a href="plants.html">LIGHTING</span></a></li>
<li><a href="plants.html">PAVING</a></li>
<li class="active"><a href="plants.html">PLANTS</a></li>
<li><a href="plants.html">POOLS</a></li>
<li><a href="plants.html">SEATING</a></li>
<li><a href="plants.html">SCULPTURE</a></li>
<li><a href="plants.html">STAIRS</a></li>
<li><a href="plants.html">SUSTAINABILITY</a></li>
<li><a href="plants.html">WATER</a></li>
</ul>
</div>
</div>
</div>
</aside>
<!-- slideshow gallery -->
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 col-xs-12">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/project-1_01.jpg" />
</li>
<li>
<img src="img/project-1_02.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p>
</li>
<li>
<img src="img/project-1_03.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p>
</li>
<li>
<img src="img/project-1_04.jpg" />
</li>
<li>
<img src="img/project-1_05.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p>
</li>
<li>
<img src="img/project-1_06.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p>
</li>
<li>
<img src="img/project-1_07.jpg" />
<p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br />
Location: Los Altos Hills, CA<br />
Architect: SDG Architects<br />
Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p>
</li>
<li>
<img src="img/project-1_08.jpg" />
</li>
</ul>
</div>
</div>
<!-- address -->
<address>232 SIR FRANCIS DRAKE BLVD</br>
SAN ANSELMO, CA 94960</br>
415 721 0905</address>
</div><!--/row -->
</div><!--/container -->
<!-- javaspcript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
</body>
</html>
CSS
/* this is a custom css stylesheet */
/* ==========================================================================
Base Styles, Bootstrap Modifications & Fonts Import
========================================================================== */
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
.container {
width: 100%;
}
.centered {
text-align: center;
}
.img-centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.mt-lg {
margin-top: 100px;
}
.mt {
margin-top: 80px;
}
.mb {
margin-bottom: 80px;
}
.drop {
margin-bottom: -15px;
}
.spaced {
margin-left: 37px;
}
.sm-spaced {
margin-left: 5px;
}
/* ==========================================================================
General styles
========================================================================== */
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
font-family: "proxima-nova", sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: 1px;
color: #555;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
a {
color: #555;
outline: 0;
}
.strong {
font-weight: bold;
font-size: 13px;
}
small {
color: #555;
}
aside {
position: absolute;
top: 0px;
left: 0px;
}
address {
text-align: left;
line-height: 23px;
letter-spacing: 2px;
float: right;
padding: 90px 0px 30px 15px;
margin-right: 70px;
}
.email {
color: #6CAA3D;
font-weight: 400;
}
.info-box {
float: right;
text-align: left;
line-height: 17px;
font-weight: 400;
letter-spacing: 2px;
width: 315px;
height: 450px;
padding: 60px 20px 0 15px;
}
.info-box p {
padding-top: 12px;
}
.info-box h5 {
padding-bottom: 8px;
font-size: 17px;
font-weight: 700;
}
.contact {
height: auto!important;
margin-right: 5px;
width: 315px;
}
.team-box img {
border: 1px solid black;
margin-bottom: 30px;
}
/* ==========================================================================
Navigation styles
========================================================================== */
/*
* Top nav section
*/
.navbar-header {
padding-bottom: 50px;
}
.navbar-brand {
margin-left: 0px!important;
}
.navbar .nav {
text-align: left;
margin-top: 45px;
}
.navbar .nav > li {
float: none;
display: inline-block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
}
.navbar-default {
background-color: white;
border-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
color: #555;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus {
color: #6CAA3D;
background-color: transparent;
text-decoration: none;
outline: 0;
}
.navbar-default .navbar-nav > li {
padding: 0px 15px 15px 15px;
}
.navbar-collapse {
margin-top: -65px;
border-top: 0px;
}
.navbar-default .navbar-collapse {
padding-top: 10px;
z-index: 99;
}
.logo {
margin-top: 10px;
height: 100px;
width: 200px;
}
.navbar-right {
padding: 15px 20px 0 0;
}
/*
* Left aside nav
*/
.panel {
border: 0px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0);
box-shadow: 0 0px 0px rgba(0,0,0,.0);
margin: 45px 0 0 100px;
}
.panel-title {
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
color: #555;
padding-top: 7px;
padding-bottom: 7px;
list-style: none;
}
.panel-title a {
text-decoration: none;
}
.panel-default > .panel-heading {
background-color: transparent;
border-color: transparent;
}
.panel-body {
margin-left: -25px;
margin-top: -22px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.panel-body ul {
list-style-type: none;
}
.panel-body ul li {
padding-top: 10px;
padding-bottom: 10px;
letter-spacing: 1px;
}
.panel-group {
text-align: left;
}
.panel-group .panel-heading + .panel-collapse > .panel-body {
border-top:0px;
}
.nav-caret {
padding-left: 10px;
font-size: 8px;
}
/*
* flexslider format
*/
.flexslider{
background:none!important;
border:none!important;
box-shadow:none!important;
margin:0px -15px 0px 0px!important;
overflow: hidden;
z-index: 1;
}
.flex-direction-nav a {
color: #999!important;
}
.flex-next {
padding-right: 40px!important;
}
.flex-control-nav {
text-align: right!important;
padding-right: 70px!important;
}
.flex-control-paging li a {
color: transparent!important;
}
.nodot .flex-control-paging li a {
display: none!important;
}
.flex-control-paging li a.flex-active {
background: #6CAA3D!important;
}
.right {
padding-top: 100%!important;
bottom: 0;
right: 0;
margin-bottom: 0px;
}
.top {
top: 0;
margin-top: 10px;
}
.btm {
bottom: 0;
margin-bottom: 10px;
}
.l {
left: 0;
}
.r {
right: 0;
}
.w {
width: 100%!important;
left: 10px;
padding-right: 30px!important;
}
.flex-caption {
position: absolute;
text-align: left;
background:rgba(255, 255, 255, 0.7);
z-index: 1;
padding: 20px;
font-size: 11px;
width: 300px;
}
.flex-caption p {
padding-top: 12px;
}
.carousel .slides > li {
padding-right: 10px;
}
最佳答案
问题是因为 float
添加pull-left
给 <div class="flexslider">
的父级将解决问题
<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left"> <!-- add pull-left
<div class="flexslider">
关于html - Bootstrap 扩展的可折叠菜单覆盖在 xs 网格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27633394/
我知道 C++ 中的 overriding 是什么。但是,是否存在覆盖?如果有,是什么意思? 谢谢。 最佳答案 在 C++ 术语中,您有 覆盖(与类层次结构中的虚拟方法相关)和 重载(与具有相同名称但
我想捕获位于另一个元素下的元素的鼠标事件。 这是我所拥有的示例:http://jsfiddle.net/KVLkp/13/ 现在我想要的是当鼠标悬停在红色方 block 上时蓝色方 block 有黄色
以下报道 here我尝试创建一个带有重叠散点图的箱线图。 但是当我运行时: In [27]: table1.t_in[table1.duration==6] Out[27]: counter 7
有一个 JS Fiddle here , 你能在不克隆到新对象的情况下替换 e.target 吗? 下面重复了那个 fiddle 的听众; one.addEventListener('click',
首先要解决重复的可能性: 我不是询问 Override 是什么、它的含义或 @Override 在 java 文档注释之外。那是我不是问 /**Some JavaDoc Comment*/ @over
我想要高于定义的数组。它存储点及其坐标。 public static List simpleGraph(List nodes) { int numEdges = nodes.size() *
我在 http://olisan.dk/blog/ 有一个博客- 如您所见,有一个 28 像素的高间隙(边距顶部)...在 style.css 中: margin-top: 0; 也被设置为 marg
Vulkan 句柄是指向 struct 的不透明指针,或者只是无符号的 64 位整数,具体取决于 VK_USE_64_BIT_PTR_DEFINES 的值: #if (VK_USE_64_BI
我正在尝试提供一个行为类似于 DataGridTextColumn 的 DataGrid 列,但在编辑模式下有一个附加按钮。我查看了 DataGridTemplateColumn,但似乎更容易将 Da
使用 Django 1.10 我想在用户名中允许\字符,因为我在使用“django.contrib.auth.middleware.RemoteUserMiddleware”的 Windows 环境中
我正在尝试使用 ffmpeg 将 Logo 放入 rtmp 流中。我的 ffmpeg 版本是 ffmpeg version 4.3.1目前在我的复杂过滤器中,我有: ffmpeg -re -i 'v
是否有用于Firebase 3存储的方法/规则来禁用文件更新或覆盖? 我为数据库找到了data.exists(),但没有为存储找到解决方案。 最佳答案 TL; DR:在Storage Security
我有两个 Docker Compose 文件,docker-compose.yml看起来像这样 version: '2' services: mongo: image: mongo:3.2
我需要覆盖 JPA 中的集合表吗?也许有人有想法 public class nationality{ @Embedded @AttributeOverrides({
嗨,我正在使用 WIX 和下面的代码将文件安装到目录中。 我的应用程序的工作方式是用户可以在该目录中复制他们自己的文件,覆盖他们喜欢的内容
我正在尝试为 Lua 中的字符串实现我自己的长度方法。 我已成功覆盖字符串的 len() 方法,但我不知道如何为 # 运算符执行此操作。 orig_len = string.len function
在Scala 2.10.4中,给出以下类: scala> class Foo { | val x = true | val f = if (x) 100 else 200
我想做上面的事情。 我过去覆盖了许多文件...... block ,模型,助手......但这个让我望而却步。 谁能看到我在这里做错了什么: (我编辑了这段代码......现在包括一些建议......
根据javadoc An instance method in a subclass with the same signature (name, plus the number and the ty
我有一段代码,只要有可用的新数据作为 InputStream 就会生成新数据。每次都覆盖同一个文件。有时文件在写入之前变为 0 kb。 Web 服务会定期读取这些文件。我需要避免文件为 0 字节的情况
我是一名优秀的程序员,十分优秀!