65

如果我更改 :rows 的值，它会起作用。但无论我用 ':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>

注意span12div 中的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”类添加到 textarea。它将拉伸到 100% 宽度；

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

更新二：此外，如果您想将容器扩展到全宽，请使用：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 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>
于 2012-10-24T09:53:16.817 回答
0

另一种选择是拆分 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;
}

还（在我的 MVC 5 中）将 ref 添加到 textarea：

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

它对我有用

于 2015-01-31T17:18:13.263 回答