获得与引导栏中的文本框相同的宽度

Question

我在使用Bootstrap（3.3.2）的Rails（4.1.5）中有一个表单。 该表单具有一个输入文本框和一个选择框。 我正在使用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>

Answer 1

答案基于该线程中 Dan Short的答案-如下所示，使用externalWidth而不是width来读取值，并使用width来编写它：

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

获得与引导栏中的文本框相同的宽度

问题描述

1 个解决方案

解决方案1
0 2015-01-30 03:06:29

获得与引导栏中的文本框相同的宽度

问题描述

1 个解决方案

解决方案1 0 2015-01-30 03:06:29

解决方案1
0 2015-01-30 03:06:29