我在尝试为我的 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;
}
我尝试了 Cobaco 的建议，结果如下（仍然有问题，左侧触摸浏览器，右侧有一个装订线空间，并且栏仍然被挤压。）：
编辑：表格行和表格单元格的建议有效，但是我必须对背景进行一些修改，左侧仍然不齐。