如何在Twitter Bootstrap中更改文本区域的列数？

Question

如果我改变:rows的值，它会起作用。但是无论我使用“：cols =>”设置什么值，它都保持在默认的cols值。列宽不会改变。

我查看了HTML源代码并反映了更改。我想知道bootstrap的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 %>

- Kichang Yang

---

我认为你实际上不能设置列数。尝试设置宽度。 - RozzA

谢谢。你救了我！我添加了 :style => "width:380px;"，现在它可以工作了。 - Kichang Yang

我认为您也可以在文本div中使用class="field span3"或span4或其他任何类。 - hagope

使用内联CSS不是一个好主意，你会失去Bootstrap响应式布局的优势！相反，你应该像@hagope所提到的那样给class="field span3"，这样它就可以根据浏览器的宽度进行更改。 - YogiZoli

谢谢，我会使用class="field span3"。你帮了我一个大忙。 - Kichang Yang

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。

- Alex Strickland

---

我只是在文本区域中添加了 span12：<textarea class="span12" rows="18"></textarea>。该 textarea 位于 html>body>form#aspnetForm>div.conainer 中。顺便说一下，在 Bootstrap v2.1.1 中我没有找到 field 类。 - enguerran

@Perry Horwich的答案更好，因为它使用了由简单表单/格式生成的HTML。f.input :some_text, :input_html => {:rows => 5, :placeholder => "输入一些文本。", :class => "span6"} - Ivailo Bardarov

这个可以工作，但我怀疑下面@Yarx的答案对于大多数情况来说更加正确。 - Jedidja

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

在文档示例中搜索“控制尺寸”。

但对于高度，我认为您仍将使用“行”属性。

- Nick Albrecht

---

请注意，VS 2013 在 site.css 中设置了特定的最大宽度为 280px。这实际上会禁用 Bootstrap 的 col-* 实现。如需覆盖对单个元素的更改，请使用 style="max-width: none"。使用行内样式将允许 col-* 将元素的宽度设置为适合列的宽度。 - Greg Grater

今天我偶然发现了这个问题，有关280像素的限制只适用于输入字段。我已经完全删除了这个限制。我更愿意依靠Bootstrap来解决这个问题，因为仅将输入元素限制在280像素会破坏Bootstrap的其他功能，例如分组输入。 - Nick Albrecht

Greg，你真是个救命恩人！我从早上开始就在苦苦思索这个问题（对CSS还很陌生）！非常感谢你！ - Hajjat

Answer 3

只需将bootstrap的“row-fluid”类添加到文本区域即可。它将延伸到100％的宽度；

更新： 对于Bootstrap 3.x，请为文本区域使用“col-xs-12”类；

更新II： 还要如果您想扩展容器以占据整个宽度，请使用：container-fluid类。

- Plippie

---

这是我个人认为最好的答案。在模态框中使用它（haml simple_form）：= f.input :body, label: 'Message', as: :text, input_html: {class: 'row-fluid', rows: '10'} - oma

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>

- PMK2029

---

我在网上搜索了很久，这个答案应该得到更多的赞同。 - gavin

如果您正在使用VS 2013 ...这就是答案...请点赞，以便未来的读者不会被旧答案迷惑。此外，如果您想在特定元素中覆盖此行为，请添加以下内容。style="max-width: none;" - Greg Grater

在VS 2015中对我非常有效。 - Adam W

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 {

    }
}

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

- Paul

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>

- Perry Horwich

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中）还需将引用添加到文本区域：

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

这对我有用

- Peter Riley