Bootstrap 3의 수평 양식 내에 중첩 된 인라인 양식

Bootstrap 3의 수평 양식 내에 중첩 된 인라인 양식

---

다음과 같이 Bootstrap 3에서 양식을 작성하고 싶습니다.

내 사이트 (위 링크가 아님)는 Bootstrap 2.3.2에서 업데이트되었으며 형식이 더 이상 올바르지 않습니다.

getbootstrap.com 에서 이러한 유형의 양식에 대한 문서를 찾을 수 없습니다 .

누구든지이 작업을 수행하는 방법을 말해 줄 수 있습니까? '사용자 이름'만 괜찮습니다.

감사.

PS 거기입니다 비슷한 질문 하지만, 부트 스트랩 2.3.2를 사용하고.

---

당신을 위해 데모 를 만들었습니다 .

중첩 된 구조가 부트 스트랩 3에 있어야하는 방법은 다음과 같습니다.

<div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

가로 형식의 컨트롤을 포함하는 div form-inline내에 전체 가 어떻게 중첩 되는지 확인하십시오 col-xs-10. 즉, 전체 form-inline가 주 수평 형태의 생일 레이블 "통제"입니다.

주 당신이 수평 형태에서 인라인 양식을 중첩하여 왼쪽 및 오른쪽 여백 문제가 발생할 것입니다. 이 문제를 해결하려면 CSS에 다음을 추가하세요.

.form-inline .form-group{
    margin-left: 0;
    margin-right: 0;
}

---

또 다른 옵션은 원하는 모든 필드를 단일 form-group.

여기에서 데모보기

<form class="form-horizontal">
    <div class="form-group">
        <label for="name" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
        </div>
    </div>

    <div class="form-group">
        <label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="day"/>
        </div>    
    </div>
</form>

---

이 Bootply 예제는 훨씬 더 나은 옵션처럼 보입니다. 유일한 것은 레이블이 너무 높기 때문에 padding-top:5px입력을 중앙에 추가 했습니다.

<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-1" for="inputEmail1">Email</label>
        <div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1" for="inputPassword1">Password</label>
        <div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12" for="TextArea">Textarea</label>
        <div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
    </div>
    <div class="form-group">
        <div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
        <div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-12">Phone number</label>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
        <div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
    </div>
    <div class="form-group">
        <label class="col-sm-1">Options</label>
        <div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
        <div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
    </div>
    <div class="form-group">
        <div class="col-sm-6">
            <button type="submit" class="btn btn-info pull-right">Submit</button>
        </div>
    </div>
</form>
<hr>
</div>

---

Chrome (및 bootply)에서 작동하도록하려면 다음과 같이 코드를 변경해야했습니다.

<form class="form-horizontal">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
    </div>
  </div>

  <div class="form-group">
    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
    <div class="col-xs-10">
      <div class="form-inline">
        <input type="text" class="form-control" placeholder="year" />
        <input type="text" class="form-control" placeholder="month" />
        <input type="text" class="form-control" placeholder="day" />
      </div>
    </div>
  </div>
</form>

---

레이블을 입력 요소에 정렬하는 데 문제가있어서 양식 인라인 및 양식 그룹 내부에서도 레이블 요소를 전송했는데 작동합니다 ..

<div class="form-group">
    <div class="col-xs-10">
        <div class="form-inline">
            <div class="form-group">
                <label for="birthday" class="col-xs-2 control-label">Birthday:</label>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>
    </div>
</div>

참고 URL : https://stackoverflow.com/questions/18429121/inline-form-nested-within-horizontal-form-in-bootstrap-3