好的,我查看了整个 CSS,似乎无法弄清楚是什么决定了导航栏上顶级链接之间的宽度。我需要让它们稍微小一点,这样当它针对 900 像素以下的屏幕进行调整时,它不会变成 2 行导航栏而不是通常的 1 行。
我尝试了类似 navbar > li 但没有成功让他们移动。但无济于事,所以我问
谢谢这里是我的导航栏代码
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="icon-chevron-down icon-white"></b></a>
<ul class="dropdown-menu">
<li><a href="services.html">Services</a></li>
<li><a href="core.html">Core values</a></li>
<li><a href="staff.html">Staff</a></li>
<li><a href="know.html">How To Know God</a></li>
<li><a href="vol.html">Volunteering</a></li>
<li><a href="giving.html">Giving</a></li>
<li><a href="contact.html">Directions & Contact</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Adult Ministries<b class="icon-chevron-down icon-white"></b></a>
<ul class="dropdown-menu">
<li><a href="adtov.html">Overview</a></li>
<li><a href="adtov.html#pst">Personal Spiritual Trainer</a></li>
<li><a href="adtov.html#care">Care Team</a></li>
<li><a href="adtov.html#hosp">Hospitality team</a></li>
<li><a href="adtov.html#int">Intercessory Prayer</a></li>
<li><a href="adtov.html#womens">Women's Ministry</a></li>
<li><a href="amp.html">Amplified Worship</a></li>
<li><a href="sermons.html">Sermons</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Student Ministries<b class="icon-chevron-down icon-white"></b></a>
<ul class="dropdown-menu">
<li><a href="stuov.html">Overview</a></li>
<li><a href="stuov.html#adult">Just For Parents</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PC Kids<b class="icon-chevron-down icon-white"></b></a>
<ul class="dropdown-menu">
<li><a href="kidov.html">Overview</a></li>
<li><a href="kidvid.html">Videos</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Life Groups<b class="icon-chevron-down icon-white"></b></a>
<ul class="dropdown-menu">
<li><a href="groups.html">Schedule</a></li>
<li><a href="groups.html#leaders">Leaders & Group Info</a></li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="missions.html">Missions</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->