html - 在 twitter bootstrap 中为嵌套的 div 设置边框

Question

我有这样的布局：

<div class="container">
  <div class="row">
    <div class="span9">
    span 9
       <div class="row">
           <div class="span5">
           span5 
           </div>
           <div class="span4">
           span4
           </div>
       </div>
    </div>
    <div class="span3">
    span 3
    </div>
  </div>
</div>
<style>
.span9
{
border:1px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>

如何为 span9 设置边框？

box-size固定 span3 位置，但 span4 和 span5 位置中断。

Answer 1

The border property will add to the width of the element you apply it to. Generally, I find that it's problematic to add this to any of the grid elements (ie. .container, .row or .span(x)). Instead, I add an additional container inside to apply the style(s) to. For example:

<div class="container">
    <div class="row">
        <div class="span9">
            <div class="addBorder">
                <div class="row">
                    <div class="span5">
                        span5 
                    </div>
                    <div class="span4">
                        span4
                    </div>
                </div>              
            </div>
        </div>
        <div class="span3">
            span 3
        </div>
    </div>
</div>

.addBorder {
    border: 1px solid black;
}

Alternatively, if you must add it to the span, you just need to add -fluid to the row selector.

<div class="container">
    <div class="row-fluid">
        <div class="span9">
            span 9
            <div class="row">
                <div class="span5">
                    span5 
                </div>
                <div class="span4">
                    span4
                </div>
            </div>
        </div>
        <div class="span3">
            span 3
        </div>
    </div>
</div>

.span9 {
    border: 1px solid black;
}