0

我有一个非常具体的问题。我有一个带有左侧标签条导航的剑道窗口，每个标签内都有一个表单向导。该表单使用引导程序来列化每个表单输入。

我正在使用“col-xs-6”，它应该将两个表单彼此内联，但它们不是。我试图在此处和此处放置此解决方案中的容器流体 div （hack，但没有工作）也尝试调整窗口的宽度，但两种形式仍然相互折叠。

唯一的解决方案是如果我将 cols 更改为 'col-xs-5' 但如果 'xs' 永远不会崩溃，并且 col-xs-6 应该占据 div 宽度的 50%，那么为什么会这样堆叠？感谢您的帮助！

所需的解决方案图像：

这里

这是我的代码：

<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>
4

1 回答 1

3

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

基本上，Kendo UI 使用默认的内容框模型，而 boostrap 使用非默认的边界框模型并将其应用于页面上的所有元素，包括不相关的元素，在这种情况下，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;
}

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

于 2016-03-17T18:16:24.767 回答