RAILS：入力フィールドがBootstrapモーダルウィンドウで長すぎる

Question

Rails 4.2でBootstrap 3モーダルを実装すると、入力フィールドがBootstrapモーダルフォームで長すぎます。 width:100%は、オンライン投稿で推奨されているように、幅を正しく設定していません。ここでは、モーダルフォームである：ここでは

はrailsnew.html.erb次のとおりです。

<div class="container"> 
    <div class="page-header clearfix"> 
    <div class="text-left"> 
    <h2><%=t('New ' + @for_which.sub('_', ' ').titleize) %></h2> 
    </div> 
    </div> 

<%= form_for @misc_definition, html: {class: 'form-group'} do |f| %> 

    <div class="form-group"> 
     <%= f.label I18n.t(@for_which.sub('_', ' ').titleize), class:"control-label" %> 
     <%= f.text_field :name, class: "form-control", style: 'width: 100%;' %> 
    </div> 
    <div class="form-group"> 
     <%= f.label I18n.t('Ranking Index'), class:"control-label" %> 
     <%= f.text_field :ranking_index, :placehoder => '1, 2, 3 ...', class: "form-control", style: 'width: 100%;' %> 
    </div> 
    <div class="form-group"> 
     <%= f.label I18n.t("Brief Note") %> 
     <%= f.text_field :brief_note, :input_html => {:rows => 2}, class: "form-control", style: 'width: 100%;' %> 
    </div> 
    <%= f.hidden_field :for_which, :input_html => {:value => @for_which} %> 

    <div class="tool-bar"> 
    <%= link_to t('Back'), misc_definitions_path(:for_which => @for_which, :subaction => @for_which), :class => 'btn btn-primary' %> 
    <%= submit_tag t('Save'), :class => 'btn btn-primary' %> 
    </div> 


<% end %> 

</div> 

このフォームは `new.js.erb '内に挿入されている：

にする方法

$("#newmiscdef .modal-content").html('<%= j render(:file => "commonx/misc_definitions/new.html.erb") %>'); 
$("#newmiscdef").modal(); 

入力フィールドはモーダルウィンドウに収まりますか？ありがとう。

Answer 1

はどこかにあなたがそれを削除し、入力タイプに幅= 100％を与えている、あなたは、ブートストラップグリッドシステムを使用してラベル幅とテキストボックスの幅を指定する必要があり、この

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <h2>Horizontal form</h2> 
 
    <form class="form-horizontal" action="/action_page.php"> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="email">Email:</label> 
 
     <div class="col-sm-2 col-md-2 col-lg-2"> 
 
     <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label class="control-label col-sm-2" for="pwd">Password:</label> 
 
     <div class="col-sm-2 col-md-2 col-lg-2">   
 
     <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> 
 
     </div> 
 
    </div> 
 
    
 
    
 
    </form> 
 
</div>

を見てください。

スニペットを展開して実行すると、効果が表示されます

Answer 2

ここで私は幅が50％になります。以下のコードは、さまざまなサイズのウィンドウで反応します。

<div class="container"> 
    <div class="page-header clearfix"> 
    <div class="text-left"> 
    <h2><%=t('New ' + @for_which.sub('_', ' ').titleize) %></h2> 
    </div> 
    </div> 

<%= form_for @misc_definition, html: {class: 'form-group'} do |f| %> 

    <div class="form-group"> 
     <%= f.label I18n.t(@for_which.sub('_', ' ').titleize), class:"control-label" %> 
     <%= f.text_field :name, class: "form-control", style: 'width: 50%;' %> 
    </div> 
    <div class="form-group"> 
     <%= f.label I18n.t('Ranking Index'), class:"control-label" %> 
     <%= f.text_field :ranking_index, :placehoder => '1, 2, 3 ...', class: "form-control", style: 'width: 50%;' %> 
    </div> 
    <div class="form-group"> 
     <%= f.label I18n.t("Brief Note") %> 
     <%= f.text_area :brief_note, :rows => 2, class: "form-control", style: 'width: 50%;' %> 
    </div> 
    <%= f.hidden_field :for_which, :value => @for_which %> 

    <div class="tool-bar"> 
    <%= link_to t('Back'), misc_definitions_path(:for_which => @for_which, :subaction => @for_which), :class => BUTTONS_CLS['action'] %> 
    <%= submit_tag t('Save'), :class => BUTTONS_CLS['action'] %> 
    </div> 


<% end %> 

</div>