Ruby on Rails と Twitter Bootstrap を使用して、Web アプリに NavBar があります。
NAVBAR はブラウザで次のように表示されます。
しかし、Galaxy Note のブラウザーで Web アプリを検索すると、Navbar が壊れます。
app/views/layouts/application.html.erb からのスニペット
<div class="masthead">
<h3 class="active"><a href="/">WebsiteName</a></h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact Us</a></li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<strong><%= current_user.name %></strong>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="/signout">Sign out</a></li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
NAVBAR の CSS は、主に以下から借用しています:
Justified Nav Example - http://getbootstrap.com/2.3.2/examples/justified-nav.html
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
どうすればこれを修正できますか? 最近、レスポンシブ CSS を学んでいますが、それを修正する方法がわかりません。
アップデート：
上記の問題は修正されていますのでご注意ください。
しかし、これが修正されたときに何か問題があることがわかりました。ウィンドウのサイズを小さくしすぎると、ナビゲーション バーが壊れます。ユーザー部分はナビゲーションバーの外に出ます。この問題は、Bootstrap の例にも反映されています。
問題を紹介するスクリーンショットを添付しています。自分で確認するには、 Bootstrap navbar の例でウィンドウ サイズを小さくしてください。
