twitter-bootstrapでtextareaのcolsを変更するにはどうしたらいいですか？

Question

行の値を変更すると動作します。しかし、私は '：cols =>'で設定した値に関係なく、デフォルトのcolsにとどまります。列の幅は変更されません。

私はhtmlソースを見て、それを反映しました。ブートストラップのCSSが容疑者かもしれないのだろう...

HTML（最後のHTMLには「cols =」がありますが、列の幅はデフォルト値の30にとどまります。私は私の目を信じることができません！）

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

のRails：

<%= 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 %> 

Answer 1

他の回答が私のために動作しませんでした。これはやった：

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

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

Answer 2

これは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> 

Answer 3

あるTwitterのブートストラップで私の作品この：

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

    } 
} 

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

Answer 4

UPDATE：ブートストラップ3.0以降、入力要素の幅を設定するために以下に説明するクラスが削除されました。代わりに、col-*クラスを使用して、入力要素の幅を設定します。 Examples are provided in the documentation。

---

ブートストラップ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>​ 

examples in the documentationの「コントロールサイジング」を検索してください。

しかし、高さについては、あなたはまだ行属性を使用すると思います。

Answer 5

テキスト領域にブートストラップの "row-fluid"クラスを追加するだけです。それは100％幅に伸びます。

アップデート： ブートストラップ3.xでは、textareaに "col-xs-12"クラスを使用します。

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

Answer 6

私はこのサイトで次のことを発見しました。たとえば、以下を追加し、特定の要素にこの動作を無効にするにはVS2013

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

によって生成されたCSS ...

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> 

Answer 7

別のオプションがオフに分割することです以下のようにSite.css内のテキストエリア：

/* 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; 
} 

また、10

（私のMVC 5）テキストエリアに参照を追加します。それは私のために働い

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