Как я могу изменить cols textarea в twitter-bootstrap?

Если я изменяю значение: 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 %>

Ответ 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.

Ответ 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.

Ответ 3

Просто добавьте загрузочный класс "строка-жидкость" в текстовое поле. Он будет растягиваться до 100% ширины,

Обновление: Для bootstrap 3.x используйте класс "col-xs-12" для textarea;

Обновление II: Также, если вы хотите расширить контейнер до полной ширины, используйте: класс контейнер-жидкость.

Ответ 4

Я нашел следующее в site.css, сгенерированном VS2013

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

Ответ 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 {

    }
}

Таким образом, он изменяется на основе видового экрана. Кажется, все хорошо сочетается с большим браузером и небольшим мобильным устройством.

Ответ 6

Это работает для меня с twitter bootstrap 2 и simple_form 2.0.4
Результат - текстовая область span6 в строке span9.

 <div class="row" >
   <div class="span9">
     <%= f.input :some_text, :input_html => {:rows => 5, :placeholder => "Enter some text.", :class => "span6"}%>
   </div>
 </div>

Ответ 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;
}

также (в моем MVC 5) добавьте ref в textarea:

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

Это сработало для меня