Rails アプリ用に Twitter Bootstrap をカスタマイズしようとすると、いくつかの問題が発生します。
1）検索ボックスに入力すると、テキストのサイズがわずかに縮小され、奇妙なストレッチ効果が得られます。
<form class="navbar-search pull-right">
<input type="text" class="search-query span2">
<div class="icon-search"></div>
</form>
.navbar-search {
.input-prepend {
margin-bottom: 0;
}
.search-query {
padding-left: 29px;
background-color: hsl(360, 0%, 17%) !important;
}
.icon-search {
position: absolute;
top: 6px;
left: 11px;
background-image: url("http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png");
}
.search-query:focus, .search-query.focused {
color: $white;
padding-left: 30px;
}
}
より良いアイデアを得るために、フォーカスされたテキストの色が灰色に変更された別の写真を次に示します:*
2) ナビゲーション バーのサイズを変更すると、ナビゲーション バーが画面の右側に固定されないように見えます。
<header class="navbar center">
<div class="navbar-inner">
<div class="container">
<%= link_to image_tag("logo.png", size: "275x275", border: 0, alt: "logo"), root_path, id: "logo" %>
<nav>
<%= link_to "New Post", newpost_path, class: "btn btn-custom" %>
<%= link_to "Browse Posts", posts_path, class: "btn btn-custom" %>
<ul class="nav pull-right">
<% if signed_in? %>
<li class="active"><%= link_to "Users", users_path %></li>
<li id="fat-menu" class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret">Account </b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Sign out", signout_path, method: "delete" %>
</li>
</ul>
</li>
<% else %>
<li class="active"><%= link_to "Sign in", signin_path %></li>
<% end %>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query span2">
<div class="icon-search"></div>
</form>
</nav>
</div>
</div>
</header>
.navbar-inner {
background-color: $yellow;
background-image: none;
background-repeat: no-repeat;
filter: none;
}
私はコバコの提案を試してみましたが、結果は次のとおりです（まだ問題があり、左側がブラウザに触れ、右側にはガタースペースがあり、バーはまだ圧迫されています.）：
編集: table-row と table-cell の提案は機能しましたが、背景にいくつかの変更を加える必要があり、左側はまだフラッシュしていません。