-1

私はこのようなレイアウトを持っています：

<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の境界線を設定するにはどうすればよいですか？

ボックスサイズはspan3の位置を修正しますが、span4とspan5の位置は壊れます。

4

1 に答える 1

1

プロパティは、border適用先の要素の幅に追加されます。一般に、これをグリッド要素 (つまり、.container、.row、または .span(x)) に追加するのは問題があると思います。代わりに、スタイルを適用するコンテナを内部に追加します。例えば：

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

または、スパンに追加する必要がある場合は、-fluid を行セレクターに追加するだけです。

<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;
}
于 2012-12-05T02:46:06.280 に答える