web-dev-qa-db-ja.com

Twitter-bootstrapのtextareaの列を変更するにはどうすればよいですか？

：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 %>
ruby-on-rails-3twitter-bootstrap
65
Kichang Yang

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

    <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に注意してください。

80
Alex Strickland

UPDATE：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属性を使用すると思います。

54
Nick Albrecht

単にbootstrap "row-fluid"クラスをtextareaに追加します。 100％の幅に伸縮します。

更新：bootstrap 3.xの場合、textareaに「col-xs-12」クラスを使用します。

更新II：コンテナを全幅に拡張したい場合：container-fluidクラス。

17
Plippie

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>
14
PMK2029

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

<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 {

    }
}

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

7
Paul

これは、Twitter bootstrap 2およびsimple_form 2.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>
3
Perry Horwich

別のオプションは、次のようにSite.cssのtextareaを分割することです。

/* Set width on the form input elements since they're 100% wide by default */

input,
select {

  max-width: 280px;
}

textarea {

  /*max-width: 280px;*/
  max-width: 500px;
  width: 280px;
  height: 200px;
}

また、（私のMVC 5で）textareaにrefを追加します：

@Html.TextAreaFor(model => ................... @class = "form-control", @id="textarea"............

それは私のために働いた

0
Peter Riley