如何在Bootstrap网格和窗体内嵌套和垂直对齐Kendo单选按钮？

Question

我按照[1]进行无线电，因为Bootstrap方式[3]不起作用。根据[2]对收音机进行固定box-sizing似乎没有帮助。

<div class="panel panel-default">
    <div class="panel-heading">
        Heading here
    </div>
    <div class="panel-body">
        <div class="form-horizontal">
            <form > 
                <div class="form-group">
                    <label class="col-md-2">
                        Group name
                    </label>
                    <div class="col-md-9 col-md-offset-1">
                        <div class="form-group fix-kendo-sizing">
                            <input type="radio" id="causeRadio1" class="k-radio" name="fieldName" checked="">
                            <label class="k-radio-label" for="causeRadio1">Label val 1</label>
                        </div>
                        <div class="form-group fix-kendo-sizing">
                            <input type="radio" id="causeRadio1" class="k-radio" name="fieldName" checked="">
                            <label class="k-radio-label" for="causeRadio1">Label val 2</label>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

我正在附上：

<link href="@Href("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Content/kendo/2014.3.1119/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css"/>
<link href="@Href("~/Content/bootstrap-kendo-fix.css")" rel="stylesheet" type="text/css"/>

而bootstrap-kendo-fix.css是

.form-control.k-widget
{
    padding: 0;
}

.fix-kendo-sizing,
.fix-kendo-sizing input {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

谢谢！

链接：

• [1]：剑道上http://docs.telerik.com/kendo-ui/web/appearance-styling#checkboxes-and-radio-buttons
的无线电
• [2]：在http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#nesting-kendo-ui-widgets-and-bootstrap-grid-layout
修复剑道中的box-sizing
• [3]：http://getbootstrap.com/css/#forms-controls
的引导方式

Answer 1

感谢这些链接，我遇到了完全相同的问题，可以用你的代码和一些css调试来解决它：

.k-radio样式使用display:none。您看到的收音机是.k-radio-label:before和.k-radio-label:after中的收音机。

将选择器更改为.fix-kendo-sizing, .fix-kendo-sizing label::before为我工作。

我的bootstrap-kendo-fix.css现在是：

.form-control.k-widget
{
    padding: 0;
}

.fix-kendo-sizing,
.fix-kendo-sizing label::before {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

然后我通过强制line-height：

来对齐我的标签

.k-radio-label {
        line-height:inherit;
}