css - ブートストラップのラジオボタンでラベルを並べる

Question

いくつかのインライン ラジオ ボタンとラベルを含む Bootstrap フォームがあります。ラベルをボタンと同じ行に保ちたいのですが、それを実現できないようです。これが私のアプローチです：

<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/

最初の水平間隔を 2 番目の垂直間隔と組み合わせて取得するにはどうすればよいですか?

また、実生活では、フォーム内で他にも多くのことが行われていることに注意してください。使用したくform-horizontalないのは、そこにある他のものと調和しないファンキーな余白が作成されるためです。

Answer 1

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>

Answer 2

これはあなたのために働くかもしれません、これを試してください。

<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>

Answer 3

これは、フィールド ラベルを含めてすべてうまく並んでいます。フィールド ラベルを並べるのは難しい部分でした。

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>

Answer 4

私にとっての重要な洞察は次のとおりです。

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