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

Question

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

Если я изменю значение :rows, это работает. Но он остается в cols по умолчанию независимо от значения, которое я установил с помощью': cols =>'. Ширина столбца не изменится.

Я просмотрел html-источник, и он отразил изменение. Интересно, что CSS bootstrap может быть подозреваемым...

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

548 7

ruby-on-rails-3 twitter-bootstrap

7 ответов:

Comments

Ничего не найдено.

Alex Strickland · Accepted Answer · 2013-10-10 13:18:03

другие ответы не работает для меня. Это сделал:
    <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.

Nick Albrecht · Accepted Answer · 2013-10-10 13:30:33

обновление: начиная с 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.

Plippie · Accepted Answer · 2014-07-04 14:53:18

просто добавьте класс bootstrap "row-fluid" в текстовую область. Он будет растягиваться на 100% ширины;

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

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

PMK2029 · Accepted Answer · 2015-03-19 14:48:04

Я нашел следующее на сайте.сгенерированный с помощью 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>

Paul · Accepted Answer · 2012-10-24 17:54:00

Я не знаю, если это правильный способ, но я сделал это:
<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 {

    }
}
таким образом, он изменяет размер на основе окна просмотра. Кажется, чтобы выстроить все красиво на большом браузере и на маленьком мобильном устройстве.

Perry Horwich · Accepted Answer · 2012-10-24 12:53:16

это работает для меня с 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>

Peter Riley · Accepted Answer · 2015-01-31 20:58:56

другой вариант-отделить текстовую область на сайте.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) Добавить ссылку на textarea:
@Html.TextAreaFor(model => ................... @class = "form-control", @id="textarea"............
это сработало для меня