Html 引导对齐导航栏的居中折叠项
我在将导航栏的对齐方式从桌面转换为移动时遇到问题。我希望导航栏中的项目在折叠时居中对齐,而不影响桌面视图中的对齐。这是网站: CSS:Html 引导对齐导航栏的居中折叠项,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在将导航栏的对齐方式从桌面转换为移动时遇到问题。我希望导航栏中的项目在折叠时居中对齐,而不影响桌面视图中的对齐。这是网站: CSS: .dropbtn{ 背景色:#320143; 颜色:#999999; 填充:16px; 字体大小:16px; 边界:无; } /*容器-需要定位下拉内容*/ .下拉列表{ 位置:相对位置; 显示:内联块; } /*下拉内容(默认情况下隐藏)*/ .下拉内容{ 显示:无; 位置:绝对位置; 背景色:#f1f1; 最小宽度:160px; 盒影:0px 8px 16p
.dropbtn{
背景色:#320143;
颜色:#999999;
填充:16px;
字体大小:16px;
边界:无;
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置:相对位置;
显示:内联块;
}
/*下拉内容(默认情况下隐藏)*/
.下拉内容{
显示:无;
位置:绝对位置;
背景色:#f1f1;
最小宽度:160px;
盒影:0px 8px 16px 0px rgba(0,0,0,0.2);
z指数:1;
}
/*下拉列表中的链接*/
.下拉内容a{
颜色:黑色;
填充:12px 16px;
文字装饰:无;
显示:块;
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色:#ddd}
/*悬停时显示下拉菜单*/
.下拉:悬停.下拉内容{
显示:块;
}
/*显示下拉内容时,更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色:#320143;
}
HTML:
-
文章
-
关于
-
在css中添加对齐中心将影响桌面中的对齐中心尝试媒体查询()
它允许您根据需要设置移动版本的样式,而不会影响桌面大小
.dropbtn {
background-color: #320143;
color: #999999;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #320143;
}
<nav class="navbar navbar-inverse" style="background-color: #320143; margin-bottom:0px;">
<div class="container-fluid" id = "navbarcontainer" style = "margin-right:12%;">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse" style="border-color: #320143;">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse" style="height:100vh;">
<div class = "col-sm-5" style = "text-align: left;">
<ul class="nav navbar-nav navbar-left">
<li style="top: 9px;">
<div class="dropdown">
<button class="dropbtn" id="collapsed"><font face = "Tinos" size = "4"><b>Articles</b></font><span class="caret"></span></button>
<div class="dropdown-content">
<a href="http://www.heights-ateneo.org/news.php" id="collapsed"><font face = "Tinos" size = "4"><b>News</b></font></a>
<a href="http://www.heights-ateneo.org/features.php" id="collapsed"><font face = "Tinos" size = "4"><b>Features</b></font></a>
</div>
</div>
</li><li style="top: 12px;"><a href="http://www.heights-ateneo.org/folios.php" ><font face = "Tinos" size = "4"><b>Folios</b></font></a></li>
<li style="top: 12px;"><a href="http://www.heights-ateneo.org/CFC.php" ><font face = "Tinos" size = "4"><b>Contribute</b></font></a></li>
</ul>
</div>
<div class = "col-sm-1" style = "text-align: center;">
<div class="navbar-header">
<a href="<?php echo home_url(); ?>" id="collapsed"> <div class="navbar-brand button-icon hlogo"></div></a>
<div><span></span></div>
</div>
</div>
<div class = "col-sm-6" style = "text-align: left;">
<ul class="nav navbar-nav navbar-right" style = "margin-right: -20px;">
<li style ="top:9px;">
<div class="dropdown">
<button class="dropbtn" id = "abtbtn"><font face = "Tinos" size = "4"><b>About</b></font><span class="caret"></span></button>
<div class="dropdown-content">
<a href="http://www.heights-ateneo.org/about.php/" id="collapsed"><font face = "Tinos" size = "4"><b>About Us</b></font></a>
<a href="http://www.heights-ateneo.org/about.php/#history" id="collapsed"><font face = "Tinos" size = "4"><b>History</b></font></a>
<a href="http://www.heights-ateneo.org/about.php/#projects" id="collapsed"><font face = "Tinos" size = "4"><b>Projects</b></font></a>
</div>
</div>
</li>
<li style="top: 12px;"><a href="http://www.heights-ateneo.org/contact.php" ><font face = "Tinos" size = "4"><b>Contact</b></font></a></li>
<li style="top: 22px; margin-left:12px; margin-right:20px;"><div class="search-box"><div class="search-container">
<!-- <span class="icon"><i class="fa fa-search"></i></span> -->
<form action="http://heights-ateneo.org/" method="get" class="form-inline"><font face = "Tinos" size = "3"><input type="text" id="search" placeholder="Search..." name="s"/></font>
</div></div></li>
</ul>
</div>
</div>
</div>
</div>
</nav>