Question

我有一个非常具体的问题。我有一个带有左侧标签导航的kendo窗口，每个标签内都有一个表单向导。表单使用bootstrap来列化每个表单输入。

我正在使用＆＃39; col-xs-6＆＃39;应该将两种形式相互串联，但它们不是。我试图从这个解决方案中放置一个容器流体div here和here（黑客，但没有工作）也试图调整窗口的宽度，但这两种形式仍然彼此崩溃。

唯一的解决方法是将cols更改为＆＃39; col-xs-5＆＃39;但如果＆＃39; xs＆＃39;永远不会崩溃，col-xs-6应该占用div宽度的50％，那为什么要堆叠？我很感激帮助！

所需的解决方案图片：

here

这是我的代码：

<div class="container-fluid">
    <form id="general-info" method="POST" action="#">
        <fieldset>
        <legend>General Information</legend>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-6">
                        <label for="company-name">Company Name *</label>
                        <input class="form-control required" id="company-name" name="#" type="text" />
                    </div>
                    <div class="col-xs-6">
                        <label for="client-id">ClientId *</label>
                        <input class="form-control required" id="client-id" name="#" type="text" />
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-6">
                        <label for="account-manager">Account Manager</label>
                        <input class="form-control" id="account-manager" name="#" type="text" />
                    </div>
                    <div class="col-xs-6">
                        <label for="manager-email">Account Manager Email</label>
                        <input class="form-control" id="manager-email" name="#" type="text" />
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Client Information</legend>
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-3">
                        <img id="image" src="#" height="100" width="200" />
                    </div>
                    <div class="col-xs-6">
                        <p>Select a logo to upload</p>
                        <p class="text-muted">Valid File Types: jpg, jpeg, png, bmp, gif</p>
                        <input type="file" class="form-control-file required" id="photos" onchange="readURL(this);" />
                    </div>
                    <div class="col-xs-6 client-domain">
                        <label for="domain-prefix">Domain Prefix *</label>
                        <input class="form-control required" id="domain-prefix" name="#" type="text" />
                    </div>
                </div>
            </div>
        </fieldset>
        <hr>
        <fieldset>
            <div class='modal-buttons'>
                <div style='float: left;'>
                    <button class="save-button">Save</button>
                    <button class="close-button">Close</button>
                </div>
                <div style='float: right;'>
                    <button class="next-button">Next</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>

Answer 1

我在剑道的文档here中找到了问题的解决方案。我知道可能会有一些人将来会遇到这个问题。我希望这个答案能很好地找到答案。

基本上，Kendo UI使用默认的内容框模型，而boostrap使用非默认的边框模型，并将其应用于页面上的所有元素，包括不相关的元素，在这种情况下，Kendo Windows。要覆盖Bootstrap的CSS，您可以将内容框框模型应用于所有元素，如下所示：

*, :before, :after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

然后将border-box模型仅用于需要它的Bootstrap元素：

.form-control,
.container,
.container-fluid,
.row,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我希望这会有所帮助。快乐的编码！

Kendo窗口中带有标签的我的引导列正在折叠

1 个答案: