0

2 パネル モーダルを作成する方法についてのアイデアはありますか。たとえば、片側はログインフォームか何かで、反対側はユーザーが取得するもののリストになります。または、片側が物理的な連絡先情報の div で、反対側がメールの連絡先フォームになります。モーダル div タグの下に 2 つの div を作成しようとしましたが、span5 または span6 ごとに 1 つを左にプルし、もう 1 つを右にプルしましたが、うまくいきませんでした。この問題があるので質問します。また、連絡先フォームのラベルと入力ボックスの間にスペースがたくさんある理由を誰か教えてもらえますか? scoopclassifieds.com にアクセスして (私のサイトをプラグインしようとしていないため、まだ写真を投稿できません)、[お問い合わせ] をクリックしてください。HTMLマークアップブローを配置しました

<div class="modal hide fade" id="contactForm" aria-hidden="true">
                    <div class="modal-body">
                                <form action="" method="post" class="form-horizontal">
            <div class="control-group">
                <label class="control-label">Email:</label>
                <div class="controls">
                    <input type="text" name="email" id="email" class="input" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Subject:</label>
                <div class="controls">
                    <input type="text" name="subject" id="subject" class="input" />
                </div>
            </div>
            <div class="control-group">
            <label class="control-label">Message:</label><br/><br/>
                <div class="controls">
                   <textarea rows="5" class="input span4" name="message" id="message"></textarea>
                </div>
            </div>
            <div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
                        </form>
                    </div>
                </div>

コードがひどくフォーマットされている場合は申し訳ありません。cpanel テキストエディタを使用して開発しました。私はそれが悪い考えであることを知っていますが、ライブの例を提供するためにできるだけ早くそれをしなければなりませんでした.

4

1 に答える 1

1

row-fluidの中に a を入れてから、その中modal-bodyに 2を入れてみてくださいspan6。

<div class="modal-body">
<div class="row-fluid">
   <form class="span6">
   </form>
   <div class="span6">
   </div>
</div>
</div>

モーダルのデフォルトの幅を増やしたい場合もあります..

.modal {
    width:45%;
    left:45%;
}

Bootply のデモ: http://bootply.com/69517

于 2013-07-25T14:44:32.083 に答える