Question

我经历了一系列的例子，我似乎无法在正确的方法上找到明确的答案。我认为我的问题因输入组而变得复杂......

在水平表单中编码内联字段的正确方法是什么？ e.g。

Name:    [name        ]
Address: [address     ]
Radio:   o one  o two  o three
Dates:   [from |a] to [to  |b]

文档似乎说要围绕class = form-inline中的内联字段，但对于字段组，它似乎不起作用...

单选按钮格式化稍微搞砸了。但是日期字段总是换行。

我可以想到几种破解它的方法。但我真的很想知道修复它的“正确”方法。

请参阅：http://jsfiddle.net/pcarroll/2uDYz/4/

任何人

Answer 1

对于单选按钮，您可以将<div class="radio">修改为<div class="radio radio-inline">

对于其他元素，您可以使用col-xs的变体

http://jsfiddle.net/2uDYz/6/

Answer 2

您不需要像这样包装无线电元素。删除div包并将.radioinline或.checkbox-inline应用于标签。这是正确的方法。

http://jsfiddle.net/2uDYz/9/

<div class="form-group">
    <label class="control-label col-xs-3" for="type">Offer type</label>
    <div class="col-xs-9">
        <label class="radio-inline">
            <input name="type" type="radio" value="One"> One
        </label>
        <label class="radio-inline">
            <input name="type" type="radio" value="One"> Two
        </label>
    </div>
</div>

对于日期输入，由于您使用的是输入组，我将使用col包装控制它们。

<div class="form-group">
        <label class="control-label col-xs-3" for="fromdate">Available from</label>
        <div class="col-xs-9">
            <div class="row">
                <div class="col-xs-6">
                    <div class="input-group">
                        <input class="form-control datepicker" name="fromdate" type="text" value="2014-01-01">
                        <div class="input-group-addon"> X </div>
                    </div>                  
                </div>
                <div class="col-xs-6">
                    <div class="input-group">
                        <input class="form-control datepicker" name="todate" type="text" value="2014-01-01">
                        <div class="input-group-addon"> Y </div>
                    </div>                  
                </div>
            </div>
        </div>
    </div>

Bootstrap 3表单 - 具有水平表单的内联字段

2 个答案: