부트 스트랩 : 더 넓은 입력 필드

부트 스트랩 : 더 넓은 입력 필드

---

Twitter 부트 스트랩에서 입력 필드를 기본값보다 넓게 만들려면 어떻게해야합니까?

예제 의 hero-unit클래스에서 더 넓은 검색 양식을 만들려고합니다 .

---

input-large , input-medium , ... 클래스에 내장 된 부트 스트랩을 사용합니다 .<input type="text" class="input-large search-query">

또는 자신의 CSS를 사용하십시오.

1. 요소에 고유 한 클래스 이름을 지정하십시오. class="search-query input-mysize"
2. 다음을 css 파일에 추가하십시오 (bootstrap.less 또는 css 파일이 아님).
   .input-mysize { width: 150px }

---

다양한 크기 입력에 대한 다양한 클래스가 있습니다.

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

---

부트 스트랩 3.0 :

.input-lg와 같은 클래스를 사용하여 높이를 설정하고 .col-lg- *와 같은 그리드 열 클래스를 사용하여 너비를 설정합니다.

예:

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

출처 : http://getbootstrap.com/css/#forms-control-sizes

---

span4 또는 span6을 클래스로 사용하여 더 넓은 입력 필드를 만들었습니다.

<input type="text" class="span6 input-large search-query">

이렇게하면 앞에서 언급 한 추가 사용자 지정 CSS가 필요하지 않습니다.

---

"input-mini"라고 불리는 더 작은 것도 있습니다.

---

나는 당신이 나와 같은 문제를 겪고 있다고 가정 할 것입니다. TextBox에 더 큰 크기를 지정하고 중요하다고 표시하더라도 상자가 커지지는 않습니다. site.css 파일에서 MaxWidth가 280px로 설정되어 있기 때문일 수 있습니다.

입력에 스타일 속성을 추가하여 다음과 같이 MaxWidth를 제거하십시오.

<input type="text"  style="max-width:none !important" class="input-medium">

---

부트 스트랩 4에서는 더 큰 입력 파일을 설계했습니다.

입력 파일의 크기를 늘리는 간단한 해결책은 다음을 사용하는 것입니다 font-size.

예를 들어 스타일을 추가하십시오.

input[type="file"] {
  font-size:35px
}

그렇지 않으면 하나의 사용자 정의 클래스를 만들고 입력 컨트롤에 추가 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/9784990/bootstrap-wider-input-field