Rails Bootstrap CSS问题
我在尝试为我的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的建议，这里是结果（仍然有问题，左侧触及浏览器，右侧有排水沟空间，酒吧仍在挤压）：
编辑：表行和表格单元格的建议工作，但我不得不做一些修改的背景和左侧仍然不齐平。
为了queston 1）：
尝试使用css2.1表格显示：
.home-row {display: table-row;}
.home-row>.span4 {display: table-cell;}
请参阅http://www.w3.org/TR/CSS21/tables.html了解更多有关CSS表格显示的浏览器支持，这些日子很不错（请参阅http://caniuse.com/css-table only IE7及以下版本don' t支持）
3）
.navbar {position: relative; right: 0;}
应该保持它连接到右侧
链接地址: http://www.djcxy.com/p/36411.html