BootstrapのModal使う時は data-keyboard="false" にしておく

まあ、同じModalでも画像を表示するとかだったらいいんだが、
大体うちらが作るようなモーダルはそのなかにformがあってなんかを入力するようなmodal だ。
入力中に日本語の変換を間違えたのでescキーを押したらモーダルが消えたんだよ！とクレームが付く。

ということで、モーダルの中身を書く部分に data-keyboard="false" を追加する。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false">

こんな感じ。
ついでなんで書いとくと、そのモーダルにAjaxで別ソースを読み込ませたい場合は以下のようにする。

$('#myModal').empty().modal('show').load("another.php");

この方がよく使うだろう。モーダルの中味を別テンプレートにできるし、フォームを動的に生成するphpも別ファイルにできる。

２つのsubmitボタンを横にまっすぐ並べる方法

まあ、よくある話なんですが、問い合わせフォームみたいなもので以下のようなボタンが２つ並んだソースがデザイナーさんから送られてきたりする訳です。

<div class="controls">
    <input type="button" value="戻る" />
    <input type="submit" value="送信" />
</div>

まあ、これはこれでそのままでもちゃんと横に並んでくれるし、普通はcssでセンタリングしてあったり、多少マージンがとってあったり、ひどいのになると、ボタンとボタンの間に全角スペース入れてそれで間隔を調整してたり(笑)、そんな感じだと思います。
ただ実際プログラムを入れていくと、これでは用をなさないわけで、以下のようなソースにしたいという場合が多々あります。

<div class="controls">
    <form action="form.php" method="post">
        <fieldset>
            <input type="hidden" name="mode" value="back" />
            <input type="submit" value="戻る" />
        </fieldset>
    </form>
    <form action="form.php" method="post">
        <fieldset>
            <input type="hidden" name="mode" value="send" />
            <input type="submit" value="送信" />
        </fieldset>
    </form>
</div>

「戻る」時と「送信」する時とでモードを切り替えて処理したいような場合ですね。
これの見た目はこうなってしまいます。

で、こういう時どうしたら、簡単に直せるか、ということですね。
まずこれはどうみてもformとfieldsetがブロック要素で右端まで行っちゃってるので、

form, fieldset {
    display: inline;
    border: none;
}

とします。あとは適当にマージンとかを調整します。

form, fieldset {
    display: inline;
    border: none;
    margin: 0px;
    padding: 0px;
}

一応、デザインさんに修正依頼する時間もない時のために。