부트스트랩 양식에 두 필드를 나란히 표시

부트스트랩 양식에 두 필드를 나란히 표시

텍스트 상자가 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