Rails Bootstrap CSS 问题

Question

我在尝试为我的 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 的建议，结果如下（仍然有问题，左侧触摸浏览器，右侧有一个装订线空间，并且栏仍然被挤压。）：

编辑：表格行和表格单元格的建议有效，但是我必须对背景进行一些修改，左侧仍然不齐。

Answer 1

对于问题 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 只有 IE7 及以下不支持）

3)

.navbar {position: relative; right: 0;}

应该保持在右侧