Jak mogę zmienić cols textarea w twitter-bootstrap?

Question

Jeśli zmienię wartość: rows, to działa. Ale pozostaje na domyślnych wartościach bez względu na wartość ustawioną za pomocą ": cols =>". Szerokość kolumny nie ulegnie zmianie.

Widziałem źródło html i odzwierciedlało zmianę. Zastanawiam się, że kod CSS bootstrap może być podejrzany ...

HTML (w końcowym kodzie HTML występuje "cols =", ale szerokość kolumny pozostaje domyślna, czyli 30. Nie mogę uwierzyć własnym oczom !)

<textarea cols="100" id="comment_body" name="comment[body]" rows="5"></textarea> 

szyn:

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

innych odpowiedzi nie dla mnie. Ten zrobił:

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

zanotować span12 w div z span6.

Answer 2

Działa to dla mnie twitter bootstrap 2 i simple_form 2.0.4
Wynik jest obszarem tekst span6 w rzędzie span9

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

Answer 3

Nie wiem, czy jest to prawidłowy sposób jednak zrobiłem to:

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

i umieścić to w moim pliku bootstrapcustom.css:

@media (min-width: 768px) { 
    .textareawidth { 
     width:500px; 
    } 
} 
@media (max-width: 767px) { 
    .textareawidth { 

    } 
} 

W ten sposób zmienia rozmiar na podstawie widoku. Wydaje się, że wszystko ładnie układa się w dużą przeglądarkę i małe urządzenie mobilne.

Answer 4

UPDATE: Na Bootstrap 3.0, input-* niżej opisanych klas ustawiania szerokości elementów wejściowych zostały usunięte. Zamiast tego użyj klas col-*, aby ustawić szerokość elementów wejściowych. Examples are provided in the documentation.

---

W Bootstrap 2.3, należy użyć klas wejściowych do ustawienia szerokości.

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

zrobić znajdowania dla "zaklejania Control" dla examples in the documentation.

Ale dla wzrostu myślę, że nadal używałbyś atrybutu rows.

Answer 5

Wystarczy dodać klasę bootstrap "row-fluid" do obszaru tekstowego. Rozciągnie się do 100% szerokości;

Aktualizacja: Do bootstrap 3.x użyj klasy "col-xs-12" dla textarea;

Aktualizacja II: Również jeśli chcesz rozszerzyć pojemnik do pełnej szerokości użyj: klasa płynu-pojemnika.

Answer 6

Na stronie znalazłem następujące elementy.css generowany przez VS2013

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 
textarea { 
    max-width: 280px; 
} 

Aby zmienić to zachowanie w konkretnym elementem, należy dodać następujące ...

style="max-width: none;" 

Na przykład:

<div class="col-md-6"> 
     <textarea style="max-width: none;" 
       class="form-control" 
       placeholder="a col-md-6 multiline input box" /> 
</div> 

Answer 7

Inną opcją jest podzielona off textarea w Site.css w następujący sposób:

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

także (w moim MVC 5) dodać ref do tekstowego:

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

on pracował dla mnie