부트스트랩 양식에 두 필드를 나란히 표시
텍스트 상자가 2개인 양식에 연도 범위 입력을 표시하려고 합니다.최소 1개와 최대 1개는 대시로 구분됩니다.
저는 부트스트랩을 사용하여 이 모든 것을 동일한 라인에서 사용하기를 원하지만, 올바르게 작동하지 않는 것 같습니다.
내 코드는 다음과 같습니다.
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
현재의 모습은 다음과 같습니다.
입력 그룹을 사용하여 동일한 라인에 스타일을 지정하는 것은 어떻습니까?
다음은 사용할 최종 HTML입니다.
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
다음과 같이 표시됩니다.
다음은 스택 스니펫 데모입니다.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
저는 그것을 독자들에게 연습으로 남겨서 그것을 번역하겠습니다.asp:textbox
요소
@부트스트랩 4에 대한 KyleMit의 답변이 약간 변경되었습니다.
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
문제는.form-control
클래스 렌더링은 a와 같습니다.DIV
에 따른 요소normal-flow-of-the-page
새 줄에 렌더링합니다.
이러한 문제를 해결하는 한 가지 방법은display:inline
소유물.사용자 정의를 생성합니다.CSS
와 같은 부류의.display:inline
그리고 그것을 당신의 구성요소에 부착합니다..form-control
수업. 수업이 있어야 합니다.width
사용자의 구성요소에도 적용됩니다.
이 문제를 처리하는 다른 방법이 있습니다.form-control
내부의 구성 요소.col
수업), 하지만 가장 쉬운 방법은 그냥 당신의 것을 만드는 것입니다..form-control
하나의inline
요소(a의 방식)span
렌더링)
부트스트랩 4용
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>
부트스트랩 3.3.7:
사용하다form-inline
.
그러나 768px보다 큰 화면 해상도에서만 작동합니다.아래의 스니펫을 테스트하려면 "스니펫 확장" 링크를 클릭하여 더 넓은 보기 영역을 확인하십시오.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>
참고 자료: https://getbootstrap.com/docs/3.3/css/ #forms-message
boostrap 웹사이트를 확인하셨습니까?"양식" 검색
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
@KyleMit 답변은 이 문제를 해결하는 한 가지 방법이지만, 우리는 다음을 통해 달성되는 분할되지 않은 입력 필드를 피하는 것을 선택할 수 있습니다.input-group
수업. 이것을 하는 더 좋은 방법은 사용하는 것입니다.form-group
그리고.row
부모에 대한 수업div
및 사용input
부트스트랩에서 제공하는 그리드 시스템 클래스가 있는 요소.
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
클래스가 있는 div 안에 두 개의 입력을 넣으면 됩니다.form-group
그리고 div 스타일에 디스플레이 플렉스를 설정합니다.
<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
언급URL : https://stackoverflow.com/questions/27451693/display-two-fields-side-by-side-in-a-bootstrap-form
'sourcecode' 카테고리의 다른 글
"메모리가 8바이트 정렬"이라는 것은 무엇을 의미합니까? (0) | 2023.07.07 |
---|---|
mongoDB에서 업데이트를 사용한 집계 (0) | 2023.07.07 |
커밋, 커밋 및 푸시, 커밋 및 동기화의 차이점 (0) | 2023.07.07 |
스프링 부팅 및 최대 절전 모드: DDL 인쇄/로그 (0) | 2023.07.07 |
XPath 네임스페이스가 있는 노드 선택 (0) | 2023.07.07 |