- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我试过自定义我的导航栏,我已经从 3.0 的 Bootstrap 站点复制了基本导航栏。现在,我的导航没有变成汉堡导航,我用于导航杆的自定义背景图像, Logo 杆,但导航按钮消失了。我假设它们会在背景图片下方或屏幕外变成汉堡。
.navbar {
background: url(../images/mainnav.png) no-repeat top center;
border-radius: 0;
border: 0;
height: 100px;
width: 980px;
margin: 0 auto;
display: block;
}
.navspace {
padding: 30px 46px 30px 46px;
}
.navposition {
margin-left: 100px;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container nopadding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>max-width: 100%
<a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -
->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navposition">
<li class="navspace"><a href="#">Home</a></li>
<li class="navspace"><a href="#">Menu</a></li>
<li class="navspace"><a href="#">Location</a></li>
<li class="navspace"><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-sm-12 banner ">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img src="images/bodyimg.png" alt="">
</div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
最佳答案
您的 HTML 有很多问题。一些元素被注释掉,多余的结束标记,如 </li>
或 </ul>
, 还有你 max-width:100%
在你的 html 中。那里没有业务。
关于你的问题,问题是你设置了.navbar { width:980px }
所以当然,当你在小于 980px
的屏幕上时不是所有的.navbar
将是可见的(导航栏的右侧不适合屏幕)所以汉堡菜单在那里但不可见,因为 navbar
比屏幕大
如果您希望您的 .navbar 为 980 像素但也具有响应能力(屏幕较小时缩放),请使用 max-width:980px
见下文
.navbar {
background: url(../images/mainnav.png) no-repeat top center;
border-radius: 0;
border: 0;
height: 100px;
max-width: 980px;
margin: 0 auto;
display: block;
}
.navspace {
padding: 30px 46px 30px 46px;
}
.navposition {
margin-left: 100px;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container nopadding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
<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="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -
->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navposition">
<li class="navspace"><a href="#">Home</a></li>
<li class="navspace"><a href="#">Menu</a></li>
<li class="navspace"><a href="#">Location</a></li>
<li class="navspace"><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-sm-12 banner ">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img src="images/bodyimg.png" alt="">
</div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>
关于jquery - 导航栏没有变成汉堡包或没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508602/
我已经阅读了这个答案https://stackoverflow.com/a/45486495/1108891 ,它演示了元组类型推断。经过一些实验,我遇到了这种情况。 当我们的 tuple 函数有 T
我想删除零, 我喜欢这个模型,如果我输入 1000 然后额外的表显示从 1 到 1000 的所有数字,每个数字都会检查并删除零。 示例:如果我输入 10然后输出如 1 2 3 .....8 9 1(1
鉴于我对PowerShell的了解仍在开发中,请与我一起提出任何建议/答案。 因此,在我工作的地方我们工作的公司拥有大量日文机器,需要注册Intune。但是,我们正在运行的脚本无法在其计算机上运行,
我刚刚制作了一个将路径保存到 INI 文件中的小程序。 但是在输出中,路径是这样写的: C:\\Windows 我想这样写: C:\Windows 我用 string.replace 尝试了很多方法,
所以我尝试 std::replace(diff_path.begin(), diff_path.end(), "\\", "/"); 但它似乎无法在我的 Visual Studio 上编译.怎么办 -
我使用以下代码每 30 秒自动抓取/设置最新的页面标题: setInterval(function() { var data = "http://mysite.com/mypage
我希望有两个 View 是组成集的一部分。每个 View 中的数据最好在 UITableView 中表示。然后,我想添加一个手势来使 View 在屏幕上闪烁,并引入另一个类似的 View ,并带有页面
我正在尝试开发一个小游戏,但我遇到了以下问题:我有一个伪类“Cannon”,每个 Cannon 都有一个存储它应该守卫的区域的数组和一个存储“入侵者”的数组进入其中一个戒备区。我创建了下一个函数作为
当我从应用程序中进行插入时,所有 ★(星号)都会变成“â…” 如何阻止这种情况发生? *如果我直接通过 phpmyadmin 插入它,它就可以工作,但使用这个 php 时则不行: connect_er
我遇到了一个奇怪的问题,将 NSDictionary 存储到 NSUserDefaults,然后检索它会将其转换为 NSCFString。 这是我保存数据的地方: - (void)saveProgre
我正在尝试像这样向 coinbase api 发出请求 $url = "https://api.gdax.com/products/BTC-USD/candles?start=".date($form
我在 HTTP header 中使用 if-modified-since 来决定是否应该下载文件。应用程序已经过测试,一切正常,但现在当我询问我的 NSHTTPURLResponse 实例 respo
我向串口发送0xFF 结果是 0x3F。 所有其他字节都是正确的。 情况是这样的…… 外部盒子将这些字节发送到 PC... 0xFF, 0x0D, 0x00, 0x30, 0x31, 0x53, 0x
所以我在我的 Next JS 应用程序中遇到了这个奇怪的问题,我导入了谷歌字体,如下所示 在我的浏览器中显示的不是 href,而是 data-href="...",所以问题是谷歌无法将此识别为链接
我试图通过将 QRect 变成 QPolygon 来检查 QPolygon 和 QRect 之间的碰撞。但是,矩形也可能有我添加的旋转,所以我想知道如何将 QRect 变成 QPolygon 并考虑到
我正在尝试写一个 Conduit使用 attoparsec解析器。具体来说,给定 parseOne :: Parser T , 我想构建一个 Conduit ByteString m T重复地将解析器
标记内的超链接
我正在尝试添加 和 所以实际的文字出现在我的页面上。不是链接。 所以我希望在我的页面上显示实际的 HTML,如下所示: 目前,出现了一个死图像...我想 单独阻止了这一点,只是显示了普通的html?
最近发现一些路由器设备包含后门,some of which可以通过单个UDP数据包加以利用。我意识到其中一些后门不一定是恶意的,因为我在自己的产品中也做了同样的事情以进行故障排除:打开套接字将心跳数据
我知道我可以将 iOS 设备变成 iBeacons ( Can an iOS7 device act as an iBeacon? )。不幸的是,我只有一台设备,我的信标还没有到达。所以我想知道如何将
有没有人尝试过将 MAC 变成 iBeacon。我已经为 iOS 设备完成了此操作,并且想要一个类似的带有一些 UI 的 MAC 独立应用程序。我听说 Mavericks 上的新 API 支持 iBe
我是一名优秀的程序员,十分优秀!