Css 如何正确使用Twitter引导（添加样式）？

我试图找出正确使用引导的防弹方法。以下是我的例子：

<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>

.myClass{边框：1px实心#666；}
生活
太好了！

这将在一行中创建两个宽度相等的容器，并且：

1.）要设置容器（fullBox）的样式，请提供背景、阴影和边框

如果我用myClass（我的样式化DIV）将fullBox容器包装起来，那就行了。但如果myClass有1px边框，则通过在其周围添加1px边框，可以在水平和垂直方向上阻止具有2个像素的引导布局

<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中，则不会阻止引导布局，但由于引导容器的属性，也不会工作。内部的元素不会在其周围拉伸myClass，输出将是顶部的一条2px线（0px high myClass的边界）

生活
太好了！

如果myClass是fullBox的附加类（class=“row fluid myClass”），则该类将再次工作，但在使用边框时也将停止引导布局：

<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>

生活
太好了！

在设置半盒容器的样式时，这将变得更加复杂，下面是一个示例，但可以使用上述两个示例中的任意一个，并在半盒内环绕或使用样式化的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>

生活
太好了！

我确信必须有“正确的方法”或者至少有一种强烈推荐的方法，才能实现干净高效的可重用代码。目标是保持引导程序完好无损，并使用带有一些边框和颜色的额外样式表，而不影响框架的布局

以下是一个工作示例：

---

非常感谢您的帮助

我不明白1px边框是如何破坏引导布局的。我在bootstrap fluid布局中添加了CSS3样式和额外的填充和边距，没有任何问题

<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>


<!-- example2 myClass brakes layout -->
<div class="container">
            <div class="row-fluid">

                    <div class="span6 myClass">
                        <p>1<br />
                        2<br />
                            3<br /></p>
                    </div>


                    <div class="span6 myClass">
                        4<br />
                        5<br />
                        6<br />
                    </div>

            </div>
</div>

生活
太好了！
1

2

3

4

5

6

---

您需要合并跨度上的类，否则将破坏布局。容器内部的span类很重要。它们层叠的顺序必须是这样，否则CSS就不能工作。

我不明白1px边框是如何破坏引导布局的。我在bootstrap fluid布局中添加了CSS3样式和额外的填充和边距，没有任何问题。

<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>


<!-- example2 myClass brakes layout -->
<div class="container">
            <div class="row-fluid">

                    <div class="span6 myClass">
                        <p>1<br />
                        2<br />
                            3<br /></p>
                    </div>


                    <div class="span6 myClass">
                        4<br />
                        5<br />
                        6<br />
                    </div>

            </div>
</div>