我遇到了将导航栏从桌面转换为移动设备的问题。我希望折叠时导航栏中的项目对齐中心,而不会影响桌面视图中的对齐。这是网站:http://www.heights-ateneo.org
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;
}
HTML:
<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>
在css中添加对齐中心会影响桌面中的对齐
尝试媒体查询(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)。
它可以让您根据需要设置移动版本的样式,而不会影响桌面大小。