2

我目前在我的网站上使用引导程序，并试图利用响应功能，其中之一是较小屏幕/设备上的导航栏按钮。现在我对导航栏进行了一些更改，其中之一是将其居中而不是默认的向左浮动，它看起来像这样：

 <div class="navbar navbar-fixed-top center">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a 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>
      </a>

    <div class="nav-collapse">
      <ul class="nav">

      <li class =active ><a href="/">Home</a></li>

       <li class="dropdown" id="menu">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#menu">Our Services<b class="caret"></b></a>
         <ul class="dropdown-menu">
         <li><a href="/our_services/registeredcare">Registered Care</a></a></li>
         <li><a href="/our_services/supportedliving">Supported Living</a></a></li>
         <li><a href="/our_services/vocationalservices">Vocational Services</a></a></li>
         <li><a href="/our_services/outreach">Outreach Support</a></a></li>
         <li><a href="/our_services/dayactivities">Day Activities</a></a></li>
         <li><a href="/our_services/therapeuticservices">Therapeutic Services</a></a></li>


        </ul>
</li>

        <li class="dropdown" id="menu1">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">Our Homes<b  class="caret"></b></a>
         <ul class="dropdown-menu">
        <li><a href="/our_homes/tynewydd">Ty Newydd</a></a></li>
         <li><a href="/our_homes/sandpiper">Sandpiper</a></a></li>
        <li><a href="/our_homes/woodside">Woodside</a></a></li>

        </ul>
        </li>


        <li class="dropdown" id="menu2">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2">Our Team<b class="caret"></b></a>
        <ul class="dropdown-menu">
        <li><a href="/our_team">Our Team</a></a></li>
        <li><a href="/our_team/staff_vacancies">Staff Vacancies</a></a></li>

        </ul>
        </li>

        <li class = ><a href="/gallery">Gallery</a></li>
        <li class = ><a href="/faq">FAQ</a></li>
         <li class = ><a href="/news">News</a></li>

       <li class="dropdown" id="menu4">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu4">Feedback<b class="caret"></b></a>
        <ul class="dropdown-menu">
        <li><a href="/feedback/quality_report">Quality Reports</a></a></li>
        <li><a href="/feedback/care_standards">Care Standards</a></a></li>
        <li><a href="/feedback/testimonials">Testimonials</a></a></li>

        </ul>
        </li>

        <li class = ><a href="/contact">Contact Us</a></li>

        <li class="dropdown" id="menu3">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu3">Login<b class="caret"></b></a>
        <ul class="dropdown-menu">
    <div id="loginbox">

        <form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="5174LhGldMFczTwLf9sB+I5NKs3I0rLxGoA6xq1GKKs=" /></div>
        <div><label for="user_email">Email</label><br />
         <input id="user_email" name="user[email]" size="30" type="email" value="" /></div>

         <div><label for="user_password">Password</label><br />
         <input id="user_password" name="user[password]" size="30" type="password" /></div>

          <div><input name="user[remember_me]" type="hidden" value="0" /><input id="user_remember_me" name="user[remember_me]" type="checkbox" value="1" /> <label for="user_remember_me">Remember me</label></div>

         <div><input name="commit" type="submit" value="Sign in" /></div>
         </form>
         </div>

          </ul>
         </li>
         </div>

      </div>

    </ul>
   </div>
   </div>
   </div>

对于一个活生生的例子，你可以访问

     http://46.32.253.11/ .

我猜是因为我已将导航栏中的所有内容居中，然后它已进入 nav.collapse，但我不确定如何让它以默认方式运行而不影响我的导航栏。我想要的是让所有链接在导航栏按钮内向左对齐，而不是像现在一样全部在中心

虽然关于导航折叠的主题，是否有人知道自定义它的任何方法，例如列出所有标题，然后可能单击以显示所有子标题？只是一个想法。无论如何，如果有人可以提供任何帮助，将不胜感激

4

1 回答 1

1

使用媒体查询应用您的覆盖

@media (min-width: 768px) {
  .navbar.center {
    ...
  }
}

导航栏将从 768px 及之后居中。

于 2012-07-05T07:45:14.000 回答