在Firefox(在Win7和Win8上测试)中,使用下面的代码 - 当响应图像在内部时,<fieldset>它不再响应.这意味着当我的表单为手机调整大小时,图像不会相应缩小.
我可以轻松地"解决"这个问题,所以我不需要任何帮助.但是,如果您知道解决此问题的方法,我们将不胜感激.
下面的代码中的响应图像将不会响应FireFox中的浏览器大小(至少在Win7和Win8上),除非您删除<fieldset>和<legend>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Responsive Image Test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id='content' class='container'>
<div class='row'>
<div class='col-xs-10 col-xs-offset-1'>
<form>
<fieldset>
<legend>I Am Legend</legend>
<img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
我使用的固定导航栏在桌面浏览器上工作正常,但当导航栏崩溃时,搜索分为两行(http://www.employees.org/~vivek/how_it_looks.png).我如何确保搜索表单.菜单崩溃后仍保持在顶部 - 类似于yelp移动界面(http://www.employees.org/~vivek/yelp_look.png)
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">Brand</a>
<form class="navbar-form navbar-header">
<input type="text" class="form-control" placeholder="... ">
</form>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li class="dropdown">
<a href="#" …我使用<SPAN ID="idName">基于下拉选择ID 更新页面中的少量文本,但只更改了第一个元素ID.使用不同ID的工作,但希望有一个更简单的解决方案.我在下拉菜单中使用twitter-bootstrap-3.
这是HTML:
<ul class="nav nav-pills">
<li class="dropdown menu-btn">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >
<span class="glyphicon glyphicon-map-marker"></span> <span id="SelectName"></span><b class="caret"></b></a>
<ul id="myCitylist" class="dropdown-menu">
<li> <a href="#">San Jose</a> </li>
<li> <a href="#">Silicon Valley</a> </li>
<li> <a href="#">New York City</a> </li>
<li> <a href="#">Paris</a> </li>
<li> <a href="#">Silicon Valley</a> </li>
<li> <a href="#">Tokyo</a> </li>
</ul>
</li>
</ul>
Now we'll talk about <span id="SelectName"></span>
和javascript
document.getElementById("SelectName").innerHTML = "San Francisco";
$('#myCitylist li').on('click', function(){
document.getElementById("SelectName").innerHTML = $(this).text();
});
document.getElementById("SelectName").innerHTML = "San Francisco"; …