标签未排列在单选按钮右侧

Question

我正在构建一个jquery选项列表，用于选择使用单选按钮和标签，我已将单选按钮和标签嵌入到自举面板中，但无线电按钮和标签不匹配，实际上标签位于收音机下方每个选项的按钮。

function renderShippingMethods(element) {
var $ele = $(element);
var radios = ShippingMethods.map(function(sm) {
    var label = $("<label>").text(sm.ShippingName + " $" + sm.Price),
        input = $("<input>")
            .attr({
                type: "radio",
                name: "ShippingMethod",
                value: sm.ShippingMethodId
            });
        //span = $("<span>").addClass("radio-option");
    return label.prepend(input);
});
$ele.append(radios);
}

这是html

<div class="row">
    <div class="col-md-3">
        <div class="panel panel-primary">
            <div class="panel-heading text-center">
                <h3 class="panel-title">Shipping Methods</h3>
            </div>
            <div class="panel-body">
                <div id="shippingMethod"></div>
            </div>
        </div>
    </div>
</div>