0

非常に具体的な問題があります。左のタブストリップ ナビゲーションがある剣道ウィンドウがあり、各タブ内にフォーム ウィザードがあります。フォームはブートストラップを使用して各フォーム入力を列化しています。

私は 'col-xs-6' を使用しています。これは 2 つのフォームを互いにインラインにする必要がありますが、そうではありません。このソリューションのコンテナ流体divをこことここに配置しようとしました（ハックしましたが、機能しませんでした）ウィンドウの幅のサイズを変更しようとしましたが、2つのフォームはまだ互いに折りたたまれています。

これに対する唯一の解決策は、列を「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;
}

そして、それを必要とする要素をブートストラップするためにのみボーダーボックスモデルを使用します:

.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 に答える