0

我正在尝试找出正确使用 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 布局，但由于引导容器的属性，也不会工作。里面的元素不会围绕它们拉伸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/

非常感谢任何帮助！

4

1 回答 1

0

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

于 2013-05-14T18:50:01.370 回答