Question

如果我更改：rows的值，它会起作用。但它保持默认cols无论我使用'：cols =＆gt;'设置的值。列宽不会改变。

我查看了html源代码并反映了这一变化。我不知道bootstrap的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 %>

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>

请注意span12的div中的span6。

Answer 2

UPDATE：从Bootstrap 3.0开始，删除了下面描述的用于设置输入元素宽度的input-*类。而是使用col-*类来设置输入元素的宽度。 Examples are provided in the documentation

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

为examples in the documentation找到“控制大小调整”。

但是对于身高，我认为你仍然使用rows属性。

Answer 3

只需将bootstrap“row-fluid”类添加到textarea即可。它将拉伸至100％宽度;

更新：对于bootstrap 3.x，使用“col-xs-12”类为textarea;

更新II：此外，如果要将容器扩展到全宽，请使用：container-fluid class。

Answer 4

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

Answer 5

我不知道这是否是正确的方法，但是我这样做了：

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

这适用于我的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>

Answer 7

另一种选择是在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中）将ref添加到textarea：

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

它对我有用

如何在twitter-bootstrap中更改textarea的cols？

7 个答案: