2

私は現在、自分の Web サイトでブートストラップを使用しており、レスポンシブ機能を利用しようとしています。そのうちの 1 つは、小さな画面/デバイスのナビゲーション バー ボタンです。今、ナビゲーションバーにいくつかの変更を加えました。そのうちの 1 つは、デフォルトのフロート左ではなく中央に配置されており、次のようになります。

 <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/ .

navbar のすべてを中央に配置したため、nav.collapse に引き継がれたと推測していますが、navbar に影響を与えずにデフォルトの方法で動作させる方法がわかりません。私が望むのは、現在のようにすべてのリンクを中央に配置するのではなく、navbar ボタン内の左に配置することです。

ナビゲーションの崩壊についてですが、それをカスタマイズする方法を知っている人はいますか?たとえば、すべての見出しをリストし、クリックしてすべてのサブ見出しを表示するなどです。そこで一考。とにかく、誰かがこれについて何か援助を提供できるなら、それは大歓迎です

4

1 に答える 1

1

メディア クエリでオーバーライドを適用する

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

navbar は 768px 以降から中央に配置されます。

于 2012-07-05T07:45:14.000 に答える