css - Twitter Bootstrap を正しく使用する方法 (スタイルの追加)?

Question

Bootstrap を正しく使用する防弾方法を見つけようとしています。これが私の例です：

<style><!-- this is my own class in a separate stylesheet -->
    .myClass {border:1px solid #666;}
</style>

<!-- and the structure made with bootstrap -->

<div class="container">
    <div id="fullBox" class="row-fluid">
        <div id="halfBox1" class="span6">
            Life
        </div>
        <div id="halfBox2" class="span6">
            is Good!
        </div>  
    </div>
</div>

これにより、同じ幅の 2 つのコンテナが連続して作成され、次のようになります。

1.) コンテナー (fullBox) のスタイルを設定し、背景、影、および境界線を指定します。

myClass (私のスタイルの DIV) でfullBox コンテナーをラップすると、うまくいきます。ただし、myClass に 1 ピクセルの境界線がある場合、その 1 ピクセルの境界線を追加することで、水平方向と垂直方向の両方で 2 ピクセルの Bootstrap レイアウトにブレーキがかかります。

<div class="container">
    <div class="myClass">
        <div id="fullBox" class="row-fluid">
            <div id="halfBox1" class="span6">
                Life
            </div>
            <div id="halfBox2" class="span6">
                is Good!
            </div>  
        </div>
    </div>
</div>

myClass が fullBox 内にある場合、これは Bootstrap レイアウトを妨げませんが、bootstrap コンテナーのプロパティのために機能しません。内部の要素はそれらの周りに myClass を引き伸ばしません。出力は上部に 2 ピクセルの線になります (高さ 0 ピクセルの myClass の境界線)。

<div class="container">
    <div id="fullBox" class="row-fluid">
        <div class="myClass">
            <div id="halfBox1" class="span6">
                Life
            </div>
            <div id="halfBox2" class="span6">
                is Good!
            </div>  
        </div>
    </div>
</div>

myClass が fullBox の追加クラス( class="row-fluid myClass") である場合、これは再び機能しますが、境界線を使用すると、Bootstrap レイアウトにもブレーキがかかります。

<div class="container">
    <div id="fullBox" class="row-fluid myClass">
            <div id="halfBox1" class="span6">
                Life
            </div>
            <div id="halfBox2" class="span6">
                is Good!
            </div>  
    </div>
</div>

これは、halfBox コンテナーのスタイルを設定するときにさらに複雑になります。これは一例ですが、上記の他の 2 つの例のいずれかを使用して、halfBox 内でスタイル付きの div をラップするか使用することができます。

<div class="container">
    <div id="fullBox" class="row-fluid">
        <div id="halfBox1" class="span6 myClass">
            Life
        </div>
        <div id="halfBox2" class="span6 myClass">
            is Good!
        </div>  
    </div>
</div>

クリーンで効率的に再利用可能なコードを実現するには、「正しい方法」または少なくとも強く推奨される方法が必要であると確信しています。目標は、フレームワークのレイアウトを壊すことなく、Bootstrap をそのまま維持し、いくつかの境界線と bgColors を備えた追加のスタイルシートを使用することです。

これが実際のサンプルです: http://jsfiddle.net/Yatko/Y74U7/

どんな助けでも大歓迎です！