我刚刚做了一个简单的导航栏，我在我的手机上看了看，它看起来很正常:http://prntscr.com/dbjxgd ，(移动版)但在我的 iPad mini 2 上它看起来像桌面版，如下所示:http://prntscr.com/dbjxpe 是什么原因造成的？我只想让我的 iPad 显示移动版本。你们能帮帮我吗？如果您需要，这是我使用的一些代码:
代码:index.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Servicepunt Detailhandel Groningen | Home</title>
<link rel="shortcut icon" href="images/favicon/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<body>
<!-- NAVIGATIE BALK -->
<nav class="navbar navbar-default" role="navigation">
<!-- logo -->
<div class="navbar-header">
<!-- -->
<a class="navbar-brand" href="index.php">
Logo
</a>
<!-- Inklappbaar ding als je op mobiel zit-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- menu eitems linker kant-->
<div class="collapse navbar-collapse" id="mainnavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="paginas/Over/index.php">Over</a></li>
<li><a href="paginas/Nieuws/index.php">Nieuws</a></li>
<li><a href="paginas/Contact/index.php">Contact</a></li>
<!-- Dropdown -->
<!--
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Profiel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Profiel</a></li>
<li><a href="#">Instellingen</a></li>
</ul>
</li>
-->
<!-- <li><button type="button" class="btn btn-primary btn-lg raised">Niet beschikbaar</button></li> -->
</ul>
<!-- Aan de rechterkant -->
</nav>
<!-- EINDE NAVIAGTIE BALK-->
HOME
</body>
</html>
代码:style.css
textarea {
font-family: "Verdana";
resize: none;
width: 400px;
height: 50px;
}
label {
font-weight: normal;
}
input {
font-weight: normal;
}
.navbar-default {
background-color: white;
box-shadow: 20px;
padding: 15px;
border-radius: 0;
border: none;
font-size: 25px;
-webkit-box-shadow: 0 5px 3px -2px #999;
-moz-box-shadow: 0 5px 3px -2px #999;
box-shadow: 0 5px 3px -2px #999;
}
.navbar-header{
right: auto;
}
.navbar-nav > li{
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: black;
font-size: 30px;
}
.navbar-default .navbar-nav > li > a {
color: black;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: black;
opacity: 0.5;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: black;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #FFF;
}
.navbar-default .navbar-toggle {
border-color: none;
}
.icon-bar {
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: lightgrey;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: blue;
width: 40px;
height: 5px;
border-radius: 20px;
}
.navbar-collapse {
border: 0px;
}
.navbar-default .navbar-collapse {
color: #e7e7e7;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: transparent;
box-shadow: none;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: blue;
}
我希望你们能帮我解决这个问题。
最佳答案
试试这个
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
并针对 ipad 使用下面的媒体查询，请参阅更详细的信息 here
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
关于html - Bootstrap ipad 不像移动设备那样显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40801069/
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？
目前，Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段，但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联，它们似乎是正确的，这可能与嵌套在公司下的项目有关，还是我遗漏了其他东西？提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关，但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions