9

Twitter Bootstrap 内でモーダルを使用して、連絡先フォームを実装しようとしています。

理想的には、最初の 2 つのフィールドセットを隣り合わせに配置し、3 番目のフィールドセット (テキストエリアと送信ボタンを含む) をモーダルの幅いっぱいに配置したいと考えています。

行とスパンを使用してうまく機能させようとしましたが、これについてどうするかはわかりません。そもそも span12 の合計がないようです。

他の誰かが同様のことを達成しましたか?

4

3 に答える 3

23

はい、「row-fluid」クラスを使用してモーダルボディ内に配置します。これにより、使用可能なスペースに調整されます（これらのスタイルを変更した場合を除く）。

<div class="row-fluid">
<div class="span6">something</div>
<div class="span6">something else</div>
</div>
于 2012-08-07T14:47:21.977 に答える
5

これは、Twitter Bootstrap 3 クラスのみを使用したソリューションです。つまりrow、col-sm-6とclearfix:

HTML

...
<div class="modal-body row">
    <div class="col-sm-6" style="border: 1px solid black;">
        <p>First column with fieldset</p>
    </div>
    <div class="col-sm-6" style="border: 1px solid blue;">
        <p>Second column with fieldset</p>
    </div>
    <div class="clearfix">
    </div>
    <div class="col-sm-12" style="border: 1px solid red;">
        <p>Row that expands the whole width of modal &ndash; text area and submit button</p>
    </div>
</div>
...

以下の見やすさのために、列に境界線を追加しました。<p>タグの周囲にはデフォルトの Bootstrap パディングもあることに注意してください。

レンダリングされたプレビュー

上記の HTML のレンダリング例

モーダルのタイトルまたはフッター (上の例の省略記号の前後) を構成する方法を確認したい場合は、ここで Bootstrap モーダルのレイアウトを確認できます。

于 2014-03-10T02:47:00.543 に答える