Bootstrap 3 양식에서 입력 너비를 제어하는 ​​방법은 무엇입니까?

Bootstrap 3의 입력 너비 관리

Bootstrap 3은 양식 입력 너비를 제어하기 위한 제한된 범위의 옵션을 제공합니다. 원래 질문에서 알 수 있듯이 .col-lg-x를 사용해도 원하는 결과가 나오지 않습니다. .col-lg-x는 컨테이너 div에만 적용할 수 있어 레이아웃 문제가 발생하기 때문입니다.

대체 접근 방식

원하는 기능을 얻으려면 래핑을 고려하세요. 전체 양식을 단일 행으로 묶는 대신 각 입력 그룹을 자체 행에 배치합니다. 예를 들면 다음과 같습니다.

<code class="html"><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></code>

이 접근 방식에서는 각 입력 그룹이 별도의 .row로 래핑되어 화면 크기에 관계없이 입력 너비가 일관되게 유지됩니다. 또한 입력 컨테이너에 .col-lg-5를 추가하면 작은 화면에서도 입력 너비를 제어할 수 있습니다.

제한 사항

참고하는 것이 중요합니다. 원래 질문은 그리드에 의존하지 않고 내장된 BS 기능을 사용하는 솔루션을 목표로 했습니다. 그러나 솔루션에서 알 수 있듯이 내장된 옵션이라도 원하는 동작을 달성하려면 그리드를 사용해야 합니다.

위 내용은 Bootstrap 3 양식에서 입력 너비를 제어하는 ​​방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!