选择与引导导轨中的文本框相同的宽度答案

【问题标题】：Get select to same width as a text box in bootstrap rails选择与引导导轨中的文本框相同的宽度
【发布时间】：2015-03-29 11:47:21
【问题描述】：

我在 rails (4.1.5) 中有一个使用 bootstrap (3.3.2) 的表单。该表单有一个输入文本框和一个选择。我正在使用 jquery 使选择与文本框的宽度相同。

奇怪的是：jquery 改变了 select 元素的宽度，但它正在读取文本框宽度并将 select 的宽度设置为 167 像素，而 chrome 中的文本框是实际上 193 像素。

这里是_form.html.erb：

<head>
  <style>
     .form-control {
        width: auto;
     }
  </style>
</head>
<%= form_for foo do |f| %>
    <div class='form-group'><%= f.text_field :name, placeholder: 'Name', id: 'foo-name-input', class: 'form-control' %></div>
    <div class='form-group'>      
      <%= f.collection_select(:foo_type, @foo_types.keys.to_a.map{|k|[k.humanize, k]}, :last, :first, {}, {class: 'form-control', id: 'foo-type-select'}) %> 
    </div>
    <%= f.submit class: 'btn btn-default' %>
  <% end %>
  <br/>
  <div id='debug-dump'></div>
  ...
  <script>
  $(function () 
  {
    // also tried $('#foo-name-input').show instead of document.ready below, which had the same effect
    $( document ).ready(function() {
      $('#debug-dump').text($('#foo-name-input').width());
      $('#foo-type-select').width($('#foo-name-input').width());
    });
  </script>

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

答案基于 Dan Short 在this thread 中的回答 - 如下使用 outerWidth 代替 width 来读取该值，并使用 width 来写入它：

$('#foo-type-select').width($('#foo-name-input').outerWidth());

【讨论】：