html - Bootstrap - 如何正确重新定位我的下拉菜单?
问题描述
我正在尝试使用引导程序制作一个响应式网站。当窗口变得非常小时,导航菜单应该折叠。问题是当它折叠并展开菜单时,它看起来很糟糕,因为它没有正确定位。
最后一张图片显示了这个问题。我希望能够重新定位菜单,使其以好看的方式位于徽标下方,并且没有突然穿过我的徽标的奇怪白线。有人可以解释一下如何解决这个问题吗?
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<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">
<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>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-custom navbar-fixed-top navbar-expand" id="myNavbar">
<div class="container">
<div class="navbar-brand">
<img src="images/testLogo.png">
</div>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarResponsive" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="ul">
<li class="active"><a href="main.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Partners</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>
CSS:
/**
* Navigation bar.
*/
#myNavbar
{
padding-top: 1.5rem;
padding-bottom: 2.5rem;
background-color: rgb(100, 100, 100);
}
#navbarResponsive
{
width: 65%;
}
/*
.navbar-collapse
{
flex-basis: 100%;
flex-grow: 1;
}
*/
.nav > li > a
{
font-size: 18px
}
.navbar-brand
{
font-size: 28px;
}
img
{
height: 70px;
width: 70px;
float: right;
margin-top:-20px;
margin-left: 20px;
}
.navbar > .container, .navbar > .container-fluid
{
display: flex;
justify-content: space-between;
}
@media (min-width: 900px)
{
.navbar-toggler
{
display:none;
}
}
.container
{
width: 100%;
}
button
{
background-color: transparent;
}
.bg-primary
{
background-color: transparent;
}
.navbar-toggler-icon
{
background-color: transparent;
display: inline-block;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
解决方案
尝试
.collapse{
float:left;
width:100%;
}
在手机版
推荐阅读
- python - 如何将字符串数组分成 2 个单独的部分
- java - Java SWT 浏览器。具有超高清 (4K) 或更高分辨率的屏幕上的不同输出
- python - flask + restful web service 无法运行文本分类模型 + python
- gem5 - 如何在完整的系统 gem5 模拟中获得图形 GUI 输出和用户触摸/键盘/鼠标输入?
- git - 如何在 VSTS 中使用外部 powershell 模块
- database - 在 Laravel Voyager 中创建表时创建迁移文件
- java - 带有 maven intel IDEA 的包不存在 javaFX
- powershell - 如何使用 Get-AnsibleParam,Ansible 中的内置函数
- java - 从用户那里获取字符串数组长度。但是为什么会跳过将第一个单词作为输入呢?
- hadoop - 如何读取 .orc 文件中的表配置单元?