Kendo window 中带有标签条的 bootstrap 列正在折叠

Question

我有一个非常具体的问题。我有一个 kendo window，它有一个左侧的标签条导航，每个标签内都有一个表单向导。该表单使用 bootstrap 对每个表单输入进行列化。

我正在使用 'col-xs-6'，它应该将两个表格彼此内联，但它们不是。我试图从这个解决方案 and here 中放置一个容器流体 div （hack，但没有用）也尝试调整 window 的宽度，但两种形式仍然存在彼此崩溃。

唯一的解决办法是，如果我将 cols 更改为 'col-xs-5'，但如果 'xs' 永远不会崩溃，并且 col-xs-6 应该占 [=] 的 50% 32=]s宽度，那为什么要堆叠呢？感谢您的帮助！

所需的解决方案图片：

这是我的代码：

<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

我在 Kendo 的文档 here 中找到了问题的解决方案。我知道将来可能会有一些人运行遇到这个问题。我希望这个答案能找到他们。

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

*, :before, :after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-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 window 中带有标签条的 bootstrap 列正在折叠

My bootstrap columns inside Kendo window with tabstrips are collapsing

html

twitter-bootstrap

kendo-ui

kendo-window

kendo-tabstrip