twitter-bootstrap에서 텍스트 영역의 열을 어떻게 사용합니까?

twitter-bootstrap에서 텍스트 영역의 열을 어떻게 사용합니까?

---

: 행 값을 변경하면 작동합니다. 그러나 ': cols =>'로 설정 한 값에 관계없이 기본 cols에 유지됩니다. 열 너비는 변경되지 않습니다.

html 소스를보고 변경 사항을 반영했습니다. 부트하는 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 %>

---

다른 답변은 저에게 효과가 없었습니다. 이 :

    <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와 사업부에 span6.

---

업데이트 : 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>​

문서의 예를 보려면 "컨트롤 크기 조정"을 찾으십시오 .

그러나 여전히 높이의 경우 행 속성을 사용하는 것으로 생각합니다.

---

텍스트 영역을 부트하는 "row-fluid"클래스를 추가하십시오. 너비가 100 %로 동일합니다.

업데이트 : 부트 유효성 3.x의 경우 textarea에 "col-xs-12"클래스를 사용하십시오.

업데이트 II : 컨테이너를 전체 너비로 확장 컨테이너 유체를 사용하십시오.

---

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>

---

이것이 올바른 방법인지 모르겠지만 이렇게했습니다.

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

    }
}

이렇게하면 뷰포트에 따라 크기가 조정됩니다. 큰 브라우저와 작은 모바일 장치에서 모든 것을 멋지게 정렬하는 것 같습니다.

---

이것은 트위터 부트 스트랩 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>

---

또 다른 옵션은 다음과 같이 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에서) textarea에 ref를 추가하십시오.

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

그것은 나를 위해 일했습니다

참고 URL : https://stackoverflow.com/questions/10133783/how-can-i-change-cols-of-textarea-in-twitter-bootstrap