레이아웃에 영향을 주지 않고 Bootstrap 3 양식의 입력 너비를 제어하는 ​​방법은 무엇입니까?

Bootstrap 3의 입력 너비

Bootstrap 3에서는 입력 너비를 관리하는 것이 어려울 수 있습니다. 문서에서는 .col-lg-x 클래스 사용을 제안하지만 이 솔루션에는 제한 사항이 있습니다.

원래 문제:

원래 질문은 입력을 설정할 수 없다는 데서 비롯되었습니다. 컨테이너 레이아웃에 영향을 주지 않고 .col-lg-x를 사용하여 너비를 조정합니다. 이 클래스는 컨테이너 자체에만 적용될 수 있으므로 바람직하지 않은 레이아웃 문제가 발생합니다.

해결책:

실용적인 해결책은 각 입력 그룹을 자체 행 내에 래핑하는 것입니다. . 이렇게 하면 .col-lg-x 클래스를 개별 그룹에 적용하여 전체 양식 구조를 유지하면서 너비를 제어할 수 있습니다.

코드 예:

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

참고:

다양한 화면 크기에서 일관된 크기를 얻으려면 .col-xs-5 클래스는 작은 화면에 포함될 수 있습니다. 이를 제거해도 전체 기능에는 영향을 미치지 않습니다.

결론:

입력 그룹을 개별 행으로 래핑하고 .col-lg-x 클래스를 사용하면 개발자는 효과적으로 다음을 수행할 수 있습니다. 그리드 시스템이나 사용자 정의 CSS 클래스를 사용하지 않고 Bootstrap 3에서 입력 너비를 관리합니다.

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