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

Question

如果我更改:rows的值,它可以工作.但是它保持默认cols无论我使用':cols =>'设置的值.列宽不会改变.

我查看了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

更新:从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属性.

Answer 3

只需将bootstrap"row-fluid"类添加到textarea即可.它将拉伸至100%宽度;

更新:对于bootstrap 3.x,使用"col-xs-12"类为textarea;

更新II:另外如果要将容器扩展到全宽度,请使用:container-fluid类.

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 {

    }
}

这样它会根据视口调整大小.似乎可以在大型浏览器和小型移动设备上很好地排列所有内容.