- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个导航栏居中的网站,但 Logo 也在导航栏内居中。我正在使用 Bootstrap 和 LESS。
问题
在移动设备/平板电脑 View 中,当导航栏折叠时,菜单项水平显示而不是垂直显示,这看起来不太好
此外,在移动设备/平板电脑 View 中,当您单击 3 个栏时, Logo 会出现在切换菜单内,看起来更糟
当我在移动 View 中点击它时切换菜单显示,但当我点击它时它不会关闭
我的解决方案
我尝试添加一个媒体查询来为 752 像素以下的设备显示列表项“inline-block”,但由于某种原因我无法让它工作。
对于 Logo ,我尝试使用“visible-lg”类,使其仅在大屏幕上可见(并计划添加一个仅在小屏幕上可见),但它使 Logo 出现在右侧而不是在中心,我似乎无法用 CSS 更改它,因为它只是停留在右边。
我真的很喜欢居中导航栏内的 Logo ,并且几天来一直在尝试寻找解决方案,但我编写的代码似乎没有任何区别,尤其是菜单项在切换菜单上的显示方式。我可以让它与这个导航栏一起使用吗?我担心我需要重新开始,而忘记将 Logo 放在其中。非常感谢任何帮助或建议
Here is the HTML for the navbar:
<nav class="navbar navbar-default navbar-fixed-top text-center">
<nav id="navbar-primary" class="navbar" role="navigation">
<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=".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>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="#" data-ajax="false">ABOUT</a></li>
<li><a href="gallery.php" data-ajax="false">OUR CARS</a></li>
<li><a href="Prices.php" data-ajax="false">PRICES</a></li>
<a href="index.php" data-ajax="false"><img src="../assets/images/logo-dark.png" width="250" alt="Logo"></a>
<li><a href="#" data-ajax="false">PACKAGES</a></li>
<li><a href="gallery.php" data-ajax="false">BLOG</a></li>
<li><a href="contact.php" data-ajax="false">CONTACT</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</nav>
CSS:
#navbar-primary .navbar-nav {
max-height:120px;
width: 100%;
text-align: center;
li {
display: inline-block;
float: none;
a {
padding-left: 30px;
padding-right: 30px;
padding-top:10px;
}
}
}
@media (max-width: 932px) {
.navbar-default .navbar-nav > li {
float:none;
display: block;
vertical-align: top;
text-align:center;
}
}
// main Header
.header {
#logo { padding:0px 0; }
}
.navbar dropdown-menu > ul
{
white-space:normal;
position:relative;
}
.downdown-menu {
white-space: normal;
position:relative;
}
.dropdown-menu > li > a {
white-space:normal;
position:relative;
}
// Remove excess borders etc
.navbar-default {
border-top:none;
border-left: 0;
border-right: none;
margin-top:0px;
padding-bottom: 0px;
font-family: 'Open Sans Condensed', sans-serif;
margin-bottom: 0;
font-size:18px;
border-color: transparent;
white-space: normal;
}
.navbar-default .navbar-nav > li
{
margin-top:20px;
}
最佳答案
try this navbar code for your website or use these class for responsive css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="index.php">Shubhsoft</a>
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Project</a></li>
<li><a href="index.php">Client</a></li>
<li><a href="index.php">Services</a></li>
<li><a href="index.php">Contact-Us</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Wom Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index.php">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li class="divider"></li>
<li <a href="#">Seperated link</a></li>
<li class="divider"></li>
<li <a href="#"> one more Seperated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/jquery.js"></script>
关于html - 垂直显示折叠的菜单项,导航栏居中, Logo 居中( Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41473129/
谁能看看这个 fiddle http://jsfiddle.net/pkcwtone/1/并告诉我为什么我无法将图像完全放入导航中? 这是 html:
到目前为止,我有 9 个 Logo ,并且我按列表顺序显示该 Logo 。现在我要做的是,我必须显示前 3 个 Logo 并等待几秒钟,然后隐藏该 3 个 Logo 并再次显示接下来的 3 个 Log
我正在尝试 ACSLogo(Mac 版本的 Logo)中的递归程序,并希望返回 2 个整数的列表(基本上是 X 坐标和 Y 坐标)。我不知道如何让它返回 2 个值。它没有问题。 此外,当您创建一个列表
我有一个用户以 PNG 格式上传的 Logo 。 我的目标是将用户上传的 Logo 转换为白色。 像这样 - 这样它在较暗的背景下看起来不错。 我可以导出它并使用 Photoshop 获得我想要的东西
经过多次研究后,我没有弄清楚如何将我的 Web 应用程序的 Logo 与导航项对齐。我创建了 Logo 图像,但无法以正确的方式对齐它!希望你们中的一些人能帮助我。 这是Haml代码 %heade
我在 Joomla 2.5 的模板上使用 Gantry 该模板在第一点设置为托管一个小图像作为 Logo ,但我希望它在宽度方面更改为更大的图像。 因此,现在它在 ipad 上不起作用,因为它开箱即用
我正在工作的站点的 Logo 出现在左侧,但我希望它居中。我该怎么办?在下方找到 CSS 代码。 header .logo{ display: inline-block; padding: 0; ve
我确信这使用 jquery 相当简单,但我无法弄明白。我有一个带有 Logo 的网站,该网站加载时会出现。当用户将鼠标悬停在某个导航链接上时,我想将该 Logo 与不同的 Logo 交换。 当鼠标悬停
我想知道使用 LOGO 是否有任何真正的缺点?我知道它是用来教 child 的,但理论上它可以用于更高级别的项目。除了它的许多不同版本之外,还有什么真正的缺点吗? 最佳答案 除了实际问题(跨平台支持、
我一直在尝试使用公司文档中发布的两种简单方法替换 JASPERSOFT CE 中的 Logo 和背景图像。我面临的问题是它从 MYSQL 数据库加载 _THEMES\5A5D753\IMAGES\LO
当用户将鼠标悬停在导航栏上时,我试图让我的 Logo 从透明背景变为填充背景。 目前,我的 JQuery 在悬停时工作,但当用户离开导航时, Logo 不会变回透明 Logo 。
我知道之前已经回答过类似的问题。但我无法弄清楚哪种方法是最好的。我发现有两种方法: 使用img 标签获取两张图片,一张是小尺寸的,一张是大尺寸的。在大屏幕上隐藏小尺寸 Logo ,在小尺寸屏幕上则相反
我在页眉中使用的 Logo 没有背景,但我在 Logo 悬停时添加了背景。我希望 Logo 背景放大,但我使用的代码使 Logo 放大而不是背景......如何更改代码以在不影响 Logo 的情况下放
我试图将 Logo 与其下方的相应文本水平对齐,以便它们看起来美观且有序。目前,它们只是垂直的。我搜索了这个网站和许多其他网站,并尝试了不同的解决方案,但似乎没有任何效果。这是我的代码。 .intro
我正在尝试调整 Logo 的大小,并在不调整导航栏大小的情况下将标题添加到 Logo 的一侧。 What the current navbar looks like HTML:
Toggle navigation
在我的网站上,我有一个 Logo 图像,然后是公司名称。目前它是堆叠的,所以它是 Logo 图像,下面是公司名称。 我想要的是他们肩并肩。因此,左侧是 Logo 图像,右侧是公司名称。 我做错了什么?
我读过 标签 is inappropriate for a logo .但是,如果您的 Logo 是纯文本,您应该使用什么?我觉得 和 也不合适。这是一个示例: Comp
Berkeley Logo User Manual 告诉我们,所有在连字符后的命令行参数都将收集在变量中: If a command line argument is just a hyphen, t
我试图将 Logo 与几个导航链接对齐,其中大多数网站的 Logo 在左侧,几个链接在右侧(这是我正在努力实现的目标)。 我有一个媒体查询,使标题 Logo 显示在导航链接上方。 但是好像不行。 我确
我是一名优秀的程序员,十分优秀!