65

：rowsの値を変更すると、機能します。ただし、「：cols =>」で設定した値が何であれ、デフォルトのcolsのままです。列幅は変更されません。

HTMLソースを表示しましたが、変更が反映されています。ブートストラップのCSSが疑わしいのではないかと思います...

HTML（最終的なHTMLには「cols =」がありますが、列幅はデフォルト値の30のままです。目を信じられません！）

<textarea cols="100" id="comment_body" name="comment[body]" rows="5"></textarea>

レール：

<%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <i class="icon-user"></i>
    <%= f.text_field :commenter %>
  </div>
  <div class="field">
    <i class="icon-comment"></i>
    <%= f.text_area :body, :rows => 5, :cols => 100 %>
  </div>
  <div class="actions">
    <%= f.submit %>
  <div> 
<% end %>
4

7 に答える 7

80

他の答えは私にはうまくいきませんでした。これは次のことを行いました：

    <div class="span6">
      <h2>Document</h2>
        </p>
        <textarea class="field span12" id="textarea" rows="6" placeholder="Enter a short synopsis"></textarea>
        <button class="btn">Upload</button>
    </div>

span12の div に注意してくださいspan6。

于 2012-05-29T11:58:36.590 に答える
54

更新: Bootstrap 3.0 の時点でinput-*、入力要素の幅を設定するための以下で説明するクラスが削除されました。代わりに、col-*クラスを使用して入力要素の幅を設定します。例はドキュメントに記載されています。

Bootstrap 2.3 では、入力クラスを使用して幅を設定していました。

<textarea class="input-mini"></textarea>
<textarea class="input-small"></textarea>
<textarea class="input-medium"></textarea>
<textarea class="input-large"></textarea>
<textarea class="input-xlarge"></textarea>
<textarea class="input-xxlarge"></textarea>​
<textarea class="input-block-level"></textarea>​

ドキュメントの例については、「サイズの制御」を検索してください。

しかし、高さについては、rows 属性を引き続き使用すると思います。

于 2012-11-19T23:27:31.430 に答える
17

ブートストラップの「row-fluid」クラスをテキストエリアに追加するだけです。幅 100% まで伸びます。

更新: ブートストラップ 3.x の場合、テキストエリアに「col-xs-12」クラスを使用します。

更新 II: また、コンテナーを全幅に拡張する場合は、container-fluid クラスを使用します。

于 2012-12-07T14:31:58.177 に答える
14

VS2013で生成されたsite.cssで以下を見つけました

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

特定の要素でこの動作をオーバーライドするには、次を追加します...

 style="max-width: none;"

例えば：

 <div class="col-md-6">
      <textarea style="max-width: none;" 
                class="form-control" 
                placeholder="a col-md-6 multiline input box" />
 </div>
于 2014-02-16T06:06:46.600 に答える
7

これが正しい方法かどうかはわかりませんが、私はこれを行いました：

<div class="control-group">
  <label class="control-label" for="id1">Label:</label>
  <div class="controls">
    <textarea id="id1" class="textareawidth" rows="10" name="anyname">value</textarea>
  </div>
</div>

これを私のbootstrapcustom.cssファイルに入れてください：

@media (min-width: 768px) {
    .textareawidth {
        width:500px;
    }
}
@media (max-width: 767px) {
    .textareawidth {

    }
}

このようにして、ビューポートに基づいてサイズが変更されます。大きなブラウザーと小さなモバイル デバイスでは、すべてが適切に並んでいるように見えます。

于 2012-10-24T14:54:00.480 に答える
3

これは、twitter bootstrap2とsimple_form2.0.4で機能し
ます。結果は、span9行のspan6テキスト領域です。 

 <div class="row" >
   <div class="span9">
     <%= f.input :some_text, :input_html => {:rows => 5, :placeholder => "Enter some text.", :class => "span6"}%>
   </div>
 </div>
于 2012-10-24T09:53:16.817 に答える