Question

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

 <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，但我不确定如何让它以默认方式运行而不影响我的导航栏。我想要的是让所有链接在导航栏按钮内对齐，而不是在当前所有位于中心的

关于导航崩溃的问题，有没有人知道任何方法来定制它，例如列出所有标题然后点击显示所有子标题？只是想到那里。无论如何，如果有人能提供任何帮助，我将不胜感激

Answer 1

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

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

导航栏将以768px为中心，之后。

Bootstrap中的响应式导航栏

1 个答案: