부팅의 라디오 버튼으로 레이블 정렬

부팅의 라디오 버튼으로 레이블 정렬

---

일부 인라인 라디오 버튼과 레이블이있는 부트 가능한 양식이 있습니다. 버튼과 같은 줄에 레이블을 유지하고 싶지만 그렇게 할 수없는 것입니다. 내 접근 방식은 다음과 가변합니다.

<form>
    <div class="control-group">
        <label class="control-label">Some label</label>
        <div class="controls">
            <label class="radio inline">
                <input type="radio" value="1"/>
                First
            </label>
            <label class="radio inline">
                <input type="radio" value="2"/>
                Second
            </label>
        </div>
    </div>
</form>

바이올린 : http://jsfiddle.net/GaDbZ/2/

나는 또한 시도했다 :

<form>
    <div class="form-inline">
        <label class="control-label">Some label</label>
        <label class="radio">
            <input type="radio" value="1"/>
            First
        </label>
        <label class="radio">
            <input type="radio" value="2"/>
            Second
         </label>
    </div>
</form>

그러나 모든 것이 함께 스무스합니다. 바이올린 : http://jsfiddle.net/GaDbZ/3/

첫 번째 가로 간격과 두 번째 세로 간격을 결합하여 어떻게 있습니까?

또한, 실생활에서 다른 것들이 그 형태로 진행되고 form-horizontal있기 때문에 사용하고 싶지 않습니다. 왜냐하면 내가 거기에있는 다른 것들과 어울리지 않는 펑키 한 여백을 만들어 내기 때문입니다.

---

user1938475에서 제공하는 솔루션의 컨트롤 레이블에 'radio inline'클래스를 추가하면 다른 레이블과 선택되어야합니다. 또는 두 번째 예제와 같이 'radio'만 사용하는 경우 'radio'클래스를 포함합니다.

<label class="radio control-label">Some label</label>

또는 '라디오 인라인'의 경우

<label class="radio-inline control-label">Some label</label>

---

Bootstrap 3 부터 레이블에 체크 박스 인라인 및 라디오 인라인 클래스 를 사용 합니다.

이 수직 정렬을 처리합니다.

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>

---

이 당신을 위해 일할 수 있습니다, 시도하십시오.

<form>
  <div class="form-inline">
    <div class="controls-row">
      <label class="control-label">Some label</label>
      <label class="radio inline">
        <input type="radio" value="1" />First
      </label>
      <label class="radio inline">
        <input type="radio" value="2" />Second
      </label>
    </div>
  </div>
</form>

---

이것은 필드 레이블을 포함 하여 모두 멋지게 정렬되어 있습니다. 필드 레이블을 정렬하는 것은 까다로운 부분이었습니다.

HTML 코드 :

<div class="form-group">
    <label class="control-label col-md-5">Create a</label>
    <div class="col-md-7">
        <label class="radio-inline control-label">
            <input checked="checked" id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="2"> Task
        </label>
        <label class="radio-inline control-label">
            <input id="TaskLog_TaskTypeId" name="TaskLog.TaskTypeId" type="radio" value="1"> Note
        </label>
    </div>
</div>

CSHTML / Razor 코드 :

<div class="form-group">
    @Html.Label("Create a", htmlAttributes: new { @class = "control-label col-md-5" })
    <div class="col-md-7">
        <label class="radio-inline control-label">
            @Html.RadioButtonFor(model => model.TaskTypeId, Model.TaskTaskTypeId) Task
        </label>
        <label class="radio-inline control-label">
            @Html.RadioButtonFor(model => model.TaskTypeId, Model.NoteTaskTypeId) Note
        </label>
    </div>
</div>

---

저에게 중요한 통찰은 다음과 가변합니다 .- 라벨 내용이 입력 라디오 필드 에서 오는 확인 -모든 것을 조금 더 가깝게 만들기 위해 CSS를 조정했습니다.

.radio-inline+.radio-inline {
    margin-left: 5px;
}

---

가장 좋은 것은 margin-top: 2px입력 요소에 적용 하는 것입니다.

부트 스트랩 margin-top: 4px은 입력 요소에 추가 하여 라디오 버튼이 콘텐츠보다 아래로 이동하도록합니다.

참고 URL : https://stackoverflow.com/questions/14857909/lining-up-labels-with-radio-buttons-in-bootstrap