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>

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

1.) 想给容器(fullBox)设置样式，给背景、阴影和边框；

如果我用 myClass(我的样式化的 DIV)包围 fullBox 容器，那将起作用。但是如果 myClass 有 1px 边框，这将通过在周围添加 1px 边框来阻止 Bootstrap 布局在水平和垂直方向上有 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 中，这不会破坏 Bootstrap 布局，但由于 Bootstrap 容器的属性也不会起作用。里面的元素不会在它们周围拉伸(stretch) myClass，输出将是顶部 2px 的线(0px 高 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 容器的样式时，这会变得更加复杂，这里是一个示例，但可以使用上面其他两个示例中的任何一个，在 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/

非常感谢任何帮助!

Answer 1

我不明白 1px 边框是如何破坏 Bootstrap 布局的。我在 bootstrap 流体布局中为布局添加了 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>

您需要在跨度上组合类，否则您会破坏布局。容器内部的 span 类很重要。它们级联的顺序必须是这样的，否则 CSS 将无法工作。