부트 스트랩 3의 입력 너비

다시 업데이트 : 사람들이 실제로 질문을 이해하지 않고 답변을 추가하지 못하게하는 최상위 답변을 선택 하여이 질문을 닫습니다. 실제로 그리드를 사용하거나 추가 CSS를 추가하지 않고 기능을 빌드하여 수행 할 수있는 방법이 없습니다. help-block예를 들어 짧은 입력을 넘어서야하지만 '빌드 인'요소를 다루는 경우 그리드가 제대로 작동하지 않습니다 . 이것이 문제라면 BS3 토론 에서 찾을 수있는 추가 CSS 클래스를 사용하는 것이 좋습니다 . BS4가 나왔으므로 포함 된 사이징 스타일 을 사용하여 이를 관리 하는 것이 가능 하므로 더 이상 관련이 없습니다. 이 인기있는 SO 질문에 대한 좋은 의견을 보내 주셔서 감사합니다.

업데이트 : 이 질문은 그리드에 의지하지 않고 입력 폭을 관리하는 BS의 내장 기능에 관한 것이므로 열려 있습니다 (때로는 독립적으로 관리해야 함). 나는 이미 이것을 관리하기 위해 커스텀 클래스를 사용하므로 이것은 기본 CSS에 대한 방법이 아닙니다. 이 작업은 BS 기능 토론 목록 에 있으며 아직 해결되지 않았습니다.

원래 질문 : BS 3에서 입력 너비를 관리하는 방법을 아는 사람이 있습니까? 현재 일부 사용자 정의 클래스를 사용하여 해당 기능을 추가하고 있지만 문서화되지 않은 옵션이 누락되었을 수 있습니다.

현재 문서는 .col-lg-x를 사용한다고 말하지만 컨테이너 div에만 적용 할 수 있으므로 모든 종류의 레이아웃 / 플로트 문제가 발생하기 때문에 분명히 작동하지 않습니다.

여기 바이올린이 있습니다. 이상한 것은 바이올린에서 양식 그룹의 크기를 조정할 수 없다는 것입니다.

http://jsfiddle.net/tX3ae/

<form role="form" class="row">
    <div class="form-group col-lg-1">
        <label for="code">Name</label>
        <input type="text" class="form-control">
    </div>

    <div class="form-group col-lg-1 ">
        <label for="code">Email</label>
        <input type="text" class="form-control input-normal">
    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

당신이하고 싶은 것은 확실히 달성 가능합니다.

당신이 원하는 것은 하나의 행으로 전체 형태가 아닌 각 '그룹'을 한 줄로 감싸는 것입니다. 여기:

<div class="container">
    <h1>My form</h1>
    <p>How to make these input fields small and retain the layout.</p>
    <form role="form">
        <div class="row">
            <div class="form-group col-lg-1">
                <label for="code">Name</label>
                <input type="text" class="form-control" />
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-1 ">
                <label for="code">Email</label>
                <input type="text" class="form-control input-normal" />
            </div>
        </div>
        <div class="row">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </form>
</div>

새로운 jsfiddle 내가 만든 : NEW jsfiddle을

새로운 바이올린에는 'col-xs-5'도 추가되었으므로 작은 화면에서도 볼 수 있습니다. 제거해도 아무런 차이가 없습니다. 그러나 원래 수업에서 명심하십시오. 'col-lg-1'만 사용하고 있습니다. 즉, 화면 너비가 'lg'미디어 쿼리 크기보다 작 으면 기본 블록 동작이 사용됩니다. 기본적으로 'col-lg-1'만 적용하면 사용하는 논리는 다음과 같습니다.

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

자세한 내용은 Bootstrap 3 그리드 시스템 을 참조하십시오. 나는 달리 알리고 정교하게 알기를 바랍니다.

부트 스트랩 3에서

사용자 정의 스타일을 간단하게 만들 수 있습니다.

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

그런 다음 컨트롤을 추가하여 추가하십시오.

<div class="controls">
    <select id="expirymonth" class="form-control form-control-inline">
        <option value="01">01 - January</option>
        <option value="02">02 - February</option>
        <option value="03">03 - March</option>
        <option value="12">12 - December</option>
    </select>
    <select id="expiryyear" class="form-control form-control-inline">
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
    </select>
</div>

이렇게하면 HTML 레이아웃에 추가 마크 업을 넣을 필요가 없습니다.

ASP.net MVC는 Content- Site.css로 이동하여 다음 줄을 제거하거나 주석 처리하십시오.

input,
select,
textarea {
    /*max-width: 280px;*/
}

난 당신이 내부의 입력을 포장 할 필요가 있다고 생각 col-lg-4하고 내부 form-group와 모든이에 포함됩니다 form-horizontal..

    <form class="form form-horizontal">
         <div class="form-group">
           <div class="col-md-3">
            <label>Email</label>
            <input type="email" class="form-control" id="email" placeholder="email">
           </div>
         </div>
         ...
     </form>

Bootply에 데모 - http://bootply.com/78156

편집 : Bootstrap 3 문서에서 ..

부트 스트랩에서 입력, 선택 및 텍스트 영역의 너비는 기본적으로 100 %입니다. 인라인 양식을 사용하려면 사용 된 양식 컨트롤에서 너비를 설정해야합니다.

따라서 또 다른 옵션은 CSS를 사용하여 특정 너비를 설정하는 것입니다.

.form-control {
    width:100px;
}

또는 col-sm-*`form-group '에 적용하십시오 .

현재 문서는 lg를 사용하지 않고 .col-xs-x 사용한다고 말합니다. 그런 다음 바이올린을 시도하고 작동하는 것 같습니다.

http://jsfiddle.net/tX3ae/225/

레이아웃을 유지하려면 다음과 같이 클래스 "row"를 놓는 위치를 변경할 수 있습니다.

<div class="container">
  <h1>My form</h1>
  <p>How to make these input fields small and retain the layout.</p>
  <div class="row">
    <form role="form" class="col-xs-3">

      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" name="name" >
      </div>

      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" name="email">
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

http://jsfiddle.net/tX3ae/226/

<div class="form-group col-lg-4">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>

입력을 제한하려면 form.group에 클래스를 추가하십시오.

Visual Studio 15에서 Master.Site 템플릿을 사용하는 경우 기본 프로젝트에는 양식 제어 필드의 너비를 초과하는 "Site.css"가 있습니다.

텍스트 상자의 너비를 약 300px보다 넓게 만들 수 없었습니다. 나는 모든 것을 시도했지만 아무것도 효과가 없었다. Site.css에 문제가 발생한 설정이 있습니다.

이를 제거하고 필드 너비를 제어 할 수 있습니다.

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

나는 이것이 오래된 스레드라는 것을 알고 있지만 인라인 형식으로 동일한 문제가 발생했으며 위의 옵션 중 어느 것도 문제를 해결하지 못했습니다. 그래서 인라인 양식을 다음과 같이 수정했습니다.

<form class="form-inline" action="" method="post" accept-charset="UTF-8">
    <div class="row">
        <div class="form-group col-xs-7" style="padding-right: 0;">
            <label class="sr-only" for="term">Search</label>
            <input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
            <span class="help-block">0 results</span>
        </div>
        <div class="form-group col-xs-2">
            <button type="submit" name="search" class="btn btn-success" id="search">Search</button>
        </div>
    </div>
</form>

그게 내 해결책이었습니다. 비트 해키 해킹이지만 인라인 형태로 작업했습니다.

스타일 속성을 추가하거나 CSS 파일에서 입력 태그에 대한 정의를 추가 할 수 있습니다.

옵션 1 : 스타일 속성 추가

<input type="text" class="form-control" id="ex1" style="width: 100px;">

옵션 2 : CSS의 정의

input{
  width: 100px
}

자동으로 100px를 변경할 수 있습니다

도와 드릴 수 있기를 바랍니다.

부트 스트랩 3에서

.form-control이있는 모든 텍스트 <input>, <textarea> 및 <select> 요소는 width : 100 %; 기본적으로.

http://getbootstrap.com/css/#forms-example

경우에 따라 입력에 대해 원하는 최대 너비를 수동으로 설정해야합니다.

어쨌든, 당신의 모범은 효과가 있습니다. 큰 화면으로 확인하면 이름 및 이메일 필드에 with (col-lg-1 + col-lg-1 및 열 12 개)가 2/12로 표시되는 것을 확인할 수 있습니다. 그러나 화면이 더 작은 경우 (브라우저 크기 조정) 입력이 행 끝까지 확장됩니다.

간단한 CSS를 포기할 필요가 없습니다. :)

.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">

Bootstrap의 입력 요소 너비를 원하는대로 줄이거 나 늘리 max-width려면 CSS에서 사용 하십시오.

다음은 내가 만든 매우 간단한 예입니다.

    <form style="max-width:500px">

    <div class="form-group"> 
    <input type="text" class="form-control" id="name" placeholder="Name">
    </div>

    <div class="form-group">
    <input type="email" class="form-control" id="email" placeholder="Email Address">
    </div>

    <div class="form-group">
    <textarea class="form-control" rows="5" placeholder="Message"></textarea>
    </div>   

    <button type="submit" class="btn btn-primary">Submit</button>
    </form>

전체 양식의 최대 너비를 500px로 설정했습니다. 이렇게하면 Bootstrap의 그리드 시스템을 사용할 필요가 없으며 양식을 반응 형으로 유지합니다.

나는 또한 같은 문제로 어려움을 겪고 있으며 이것이 내 해결책입니다.

HTML 소스

<div class="input_width">
    <input type="text" class="form-control input-lg" placeholder="sample">
</div>

다른 div 클래스로 입력 코드 커버

CSS 소스

.input_width{
   width: 450px;
}

적용 div 클래스에 너비 또는 여백 설정을 지정하십시오.

부트 스트랩의 입력 너비는 항상 기본적으로 100 %이므로 너비는 해당 너비를 따릅니다.

이것이 가장 좋은 방법은 아니지만 문제를 해결 한 가장 쉽고 유일한 솔루션입니다.

이것이 도움이 되었기를 바랍니다.

모든 사람이 Content 폴더의 site.css 파일을 간과하는 이유를 모르겠습니다. 이 파일에서 22 행을 보면 입력 설정이 제어되는 것을 볼 수 있습니다. 귀하의 사이트가이 스타일 시트를 참조하지 않는 것 같습니다.

나는 이것을 추가했다 :

input, select, textarea { max-width: 280px;}

당신의 바이올린에 그리고 그것은 잘 작동합니다.

bootstrap.css 또는 bootstrap.min.css를 절대로 업데이트해서는 안됩니다. 그렇게하면 부트 스트랩이 업데이트 될 때 실패하도록 설정됩니다. 이것이 site.css 파일이 포함 된 이유입니다. 여기에서 원하는 반응 형 디자인을 제공하는 사이트를 변경할 수 있습니다.

여기 작동하는 바이올린이 있습니다.

style=""입력 필드에 대한 용어를 추가하고 정의 하면 가장 쉬운 방법입니다. 예 :

<form>
    <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" style="width:200px;">
    </div>
    <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" style="width:200px">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

부트 스트랩은 '입력 필드'의 속성을 제어하기 위해 'form-input'클래스를 사용합니다. 간단히 CSS 파일 또는 헤드 섹션에 원하는 너비, 테두리, 텍스트 크기 등의 'form-input'클래스를 추가하십시오.

또는 본문 섹션의 입력 속성에 size = '5'인라인 코드를 직접 추가하십시오.

<script async src="//jsfiddle.net/tX3ae/embed/"></script> 

Bootstrap 3 다음을 사용하여 반응 형이 좋은 레이아웃을 얻었습니다.

<div class="row">
    <div class="form-group  col-sm-4">
        <label for=""> Date</label>
        <input type="date" class="form-control" id="date" name="date" placeholder=" date">
    </div>

    <div class="form-group  col-sm-4">
        <label for="hours">Hours</label>
        <input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
    </div>
</div>