- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家晚上好,我是一个很长一段时间的“潜伏者”,我想首先非常感谢大家提供的所有重要信息和辛勤工作。我发现自己面临着一些挑战/问题。
我正在尝试设置我的主要导航(navbar-default)以在桌面和移动版本上按我希望的方式运行。
我想设置一个右侧菜单链接,用作下拉菜单,但它在网站的桌面版和移动版上都可用。
以下是我想到的一些图片:
桌面 View 最右边有 Logo ,旁边有链接,最右边的链接(链接 #3)有下拉菜单(见下文):
平板电脑/手机宽度保持 Logo 在左侧,隐藏链接 #1 和 #2 并仍然保持链接 #3 下拉菜单可用,菜单切换位于最右侧(见下文):
当菜单打开时(点击汉堡包),它的菜单正常显示并显示链接#1、#2。
最佳答案
你想做点什么like this ?
HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
<ul class="nav navbar-nav navbar-right mobileNav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
CSS
.mobileNav {
position: absolute;
right: 20px;
top: 0px;
}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) {
.mobileNav {
position: absolute;
right: 90px;
top: -2px;
}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.mobileNav {
position: absolute;
right: 90px;
top: -2px;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.mobileNav {
position: absolute;
right: 90px;
top: -2px;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
.mobileNav {
position: absolute;
right: 90px;
top: -2px;
}
}
更新代码:
链接更新:http://codepen.io/MaGiO/pen/eNYaep
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
<ul class="nav navbar-nav navbar-right mobileNav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.container-fluid -->
</nav>
CSS:
.mobileNav {
position: absolute;
right: 20px;
top: 0px;
}
@media only screen and (max-width: 768px) {
.mobileNav {
position: absolute;
right: 80px !important;
top: 0px;
width: 195px;
text-align: right;
}
.navbar-nav .open .dropdown-menu {
text-align: right;
border: 1px solid #efefef;
margin-top: 2px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:active,
.navbar-default .navbar-nav>.open>a:focus {
background:none;
}
}
关于html - 推特 Bootstrap 3.3.4 : navbar with right aligned dropdown menu always visible/usable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29837316/
我有一个 Segment 类和一个这样的段数组: private static class Segment { int number, type; Segment(in
我在 SO 中看到一些创建 multilanguage websites in JavaScript 的好建议包括 this article on JavaScript internationaliz
我们有浏览器前缀或黑客 (for Google and Safari) text-align: -webkit-right; (for Firefox) text-align:
过去几天我一直在关注这个问题,我正处于需要寻求帮助的地步。 http://cub.northnodes.com/index.php/about/mission/ 我需要立即捐赠 列一直 float 到
When I press right ctrl, I want the right shift the text will align right. When I press left ctrl le
我已经将右侧的列拆分为顶部和底部。在每个部分中,我在执行以下操作时遇到问题:我希望顶部占据左列高度的 50%,底部占据左列高度的另外 50%。 +-------------------+-------
我知道这个问题的标题很糟糕。对不起。 我有四个 div similar to this .我想要做的只是让 div 编号 2 和 4 之间的垂直空间被删除,而不改变 HTML 的结构。是否可以仅使用
我将表格设置为 100% 宽度。我会添加一个带有 php 的随机 div,有时会充满广告。我希望广告 div 位于表格的右侧和内容。我希望表格位于左侧,但仍为 100% 左右,它将填充广告 div 左
这个问题在这里已经有了答案: Bootstrap align navbar items to the right (24 个答案) 关闭 5 年前。
.floatright { float: right;margin: 0 0 10px 10px;clear: right;width:60px; height:60px; } Lorem
我正在尝试将 td 中的某些内容右对齐。 align="right"有效,但 text-align:right 无效。这是一个 jsfiddle显示这两种情况的示例。除了右对齐右列外,这两种情况是相同
在设计网站时,您认为用于特定任务的最佳图像格式是什么? 在试图找出用于特定任务的格式时,我总是发现自己处于两难境地……例如,我应该全面使用 .jpg 吗?或者,我何时以及为什么应该使用 .png? 例
我是一个 MySQL 新手,今天我尝试设置一个超过 5 行的 MySQL 调用。我不断收到语法错误,我尝试修复了几个小时,但我不知道问题出在哪里。这是代码: USE myDatabase; DELIM
这让我发疯。我有一个 div float 到另一个 div 的右侧,如下所示: Current Membership: 我有以下 css 规则: div#container { f
我有以下代码片段,它会产生不需要的“填充”区域,而填充为零。如何避免这个区域? 代码 div.left { background-color: red; max-width: 25%; f
在 C++ 中,表达式 left() = right() 求值 right() left() 按那个顺序。 right() 先行,正如已讨论过的 here. 我想不出让 right() 先走的理由。你
我有一个很小的菜单列表,当鼠标靠近时它应该会增长。在其原始状态下,菜单是右对齐的,悬停时每第二个元素向右移动并左对齐以为增加的高度腾出空间(参见 JSFiddle )。 ul { font-siz
td.myclass{ width: 6em; text-align: right; padding-right: 2em; } 如您所见,我希望单元格中的文本右对齐,距离单元
你怎么能看到 http://jsfiddle.net/73wst/ 我想在停止下开始,但我不知道如何设置它的样式。 我的 HTML: Stop Start 我的 CSS: .sta
一个大的内部 div 在一个小的外部 div 中,并且外部 div 溢出自动。但是为什么没有内部 div margin-right 和外部 div padding-right? html
我是一名优秀的程序员,十分优秀!