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布局。

<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布局，但由于引导容器的属性而无法工作。里面的元素不会在它们周围拉伸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流体布局中添加了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不起作用。

如何正确使用Twitter Bootstrap（添加样式）？

1 个答案: