[css] 입력 필드 위 대신 왼쪽의 레이블

입력 필드 위가 아니라 왼쪽에 레이블을 갖고 싶습니다.

<form method="post" action="" role="form" class="form-inline">
  <div class="form-group">
    <label for="rg-from">Ab: </label>
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <div class="form-group">
    <label for="rg-to">Bis: </label>
    <input type="text" id="rg-to" name="rg-to" value="" class="form-control">
  </div>
  <div class="form-group">
    <input type="button" value="Clear" class="btn btn-default btn-clear">
    <input type="submit" value="Los!" class="btn btn-primary">
  </div>
</form>

이 코드는 다음을 제공합니다.

다음을 갖고 싶습니다.

답변

각 양식 그룹에 대해 양식 인라인 클래스를 사용할 수 있습니다. 🙂

<form>
    <div class="form-group form-inline">
        <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
</form>

답변

<label>외부를 넣으십시오 form-group:

<form class="form-inline">
  <label for="rg-from">Ab: </label>
  <div class="form-group">
    <input type="text" id="rg-from" name="rg-from" value="" class="form-control">
  </div>
  <!-- rest of form -->
</form>

답변

Bootstrap 3 문서는 “Requires custom widths”섹션의 CSS 문서 탭에서 이에 대해 설명합니다.

입력, 선택 및 텍스트 영역은 Bootstrap에서 기본적으로 100 % 너비입니다. 인라인 양식을 사용하려면 내부에서 사용되는 양식 컨트롤의 너비를 설정해야합니다.

브라우저와 Firebug 또는 Chrome 도구를 사용하여 ‘너비’스타일을 억제하거나 줄이면 원하는대로 정렬되는 것을 볼 수 있습니다. 그런 다음 문제를 해결하기 위해 적절한 CSS를 만들 수 있습니다.

그러나이 작업을 전혀 수행해야한다는 것이 이상합니다. 나는이 조작이 성 가시고 장기적으로 오류가 발생하기 쉽다고 느꼈습니다. 궁극적으로 모든 인라인 입력을 전역 적으로 shim하기 위해 더미 클래스와 일부 JS를 사용했습니다. 적은 수의 사례 였으므로 크게 걱정하지 않았습니다.

그럼에도 불구하고 저도 “올바른”솔루션을 가지고 있고 제 shim / hack을 제거 할 수있는 누군가의 의견을 듣고 싶습니다.

이것이 도움이되기를 바라며 Bootstrap 3 문제로 귀하의 요청을 무시한 모든 사람들에게 개스킷을 불지 않는 것에 대한 소품입니다.

답변

두 가지 방법을 사용하여 레이블과 양식 컨트롤이 측면에있는 양식을 만들 수 있습니다.

1. 인라인 양식 레이아웃

<form class="form-inline" role="form">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="reset" class="btn btn-default">Reset</button>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

2. 수평 양식 레이아웃

<form class="form-horizontal">
    <div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-3">Email</label>
                <div class="col-xs-9">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-3">Password</label>
                <div class="col-xs-9">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

이 페이지에서 자세한 정보와 라이브 데모를 확인할 수 있습니다-http: //www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php

답변

이렇게

데모

HTML

<div class="row">
  <form class="form-inline">
    <fieldset>
      <label class="control-label"><strong>AB :</strong></label>
      <input type="text" class="input-mini" >
      <label class="control-label"><strong>BIS:</strong></label>
      <input type="text" class="input-mini" >
      <input type="button" value="Clear" class="btn btn-default btn-clear">
      <input type="submit" value="Los!" class="btn btn-primary">
    </fieldset>
  </form>
</div>

답변

나는 같은 문제가 있었고 여기 내 해결책이 있습니다.

<form method="post" class="form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="your.email@example.com"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

여기 데모입니다

답변

다음과 같이 모든 요소를 왼쪽으로 플로팅해야합니다.

.form-group,
.form-group label,
.form-group input { float:left; display:inline;   }

원하는 요소에 약간의 여백을 제공하십시오.

 .form-group { margin-right:5px }

레이블을 필드의 높이와 동일한 줄 높이로 설정하십시오.

.form-group label { line-height:--px; }