> 웹 프론트엔드 > CSS 튜토리얼 > Bootstrap 3에서 입력 필드 너비를 관리하는 방법은 무엇입니까?

Bootstrap 3에서 입력 필드 너비를 관리하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-06 04:46:02
원래의
703명이 탐색했습니다.

How to Manage Input Field Width in Bootstrap 3?

Bootstrap 3의 입력 너비 관리

Bootstrap 3은 입력 필드 너비를 제어하기 위한 강력한 옵션을 제공합니다. 그리드 시스템을 사용해야 한다는 개념과는 달리 이를 달성하기 위한 기능이 실제로 내장되어 있습니다.

중요한 단계는 전체 양식이 아닌 각 입력 그룹을 자체 행에 래핑하는 것입니다. 이 접근 방식을 사용하면 입력 컨트롤이 독립적으로 유지되고 레이아웃 문제가 방지됩니다.

사용 예:

<code class="html"><div class="container">
    <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></code>
로그인 후 복사

이 업데이트된 코드에서 각 그룹은 자체적으로 래핑됩니다. 행, 레이아웃 구조를 유지하면서 입력 필드를 좁힐 수 있습니다.

화면 너비가 LG 미디어 쿼리 크기(기본 1200픽셀)보다 작을 경우 기본 차단 동작이 적용된다는 점에 유의하는 것이 중요합니다. 더 작은 화면 크기에 대해 서로 다른 너비를 지정하려면 행 요소에 적절한 열 클래스를 추가할 수 있습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿