css - TwitterBootStrap-コンテンツを押し下げる境界線

Question

ヘッダー、記事、フッターを使用してHTML5サイトを設計しています。の左側と右側に境界線のある記事があり1px solid blackます。これは12列を折り返すのに十分であり、アプリを最大11列にサイズダウンする必要があります。これにより、右側に空白が残ります。埋めたいのですが...この余分な2pxを考慮してTwitterブートストラップを取得する簡単な方法はありますか？

ありがとう。

Answer 1

これはすでに回答済みです（ただし、質問は見つかりませんでした）

幅が狭すぎるため、スパン自体ではなく、内側の要素に境界線を設定する必要があります。

別の解決策は、をに変更するbox-sizingことborder-boxです。しかし、これはcssv3です。

アップデート

ここにいくつかの例があります、私の最も良い推測は3番目または2番目の解決策です。

• デモ（jsfiddle）

• フルスクリーンデモ（jsfiddle）

• デモレスポンシブ（jsfiddle）

解決策1：インナー

そのため、レスポンシブにはうまく反応しません（@mediaスタッキングに応じて境界線を設定するためのルールが必要です）

<div class="row">
    <div class="span3">
        <div class="inner"></div>
    </div>
    <div class="span6">
        <div class="inner"></div>
    </div>
    <div class="span3">
        <div class="inner"></div>
    </div>
</div>

.row > [class*="span"]:first-child > .inner {
    border-left: 5px solid red;
}
.row > [class*="span"]:last-child > .inner {
    border-right: 5px solid red;
}

解決策2：流体

そのため、レスポンシブにうまく反応します

<div class="row-fluid">
    <div class="inner-fluid clearfix">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
    </div>
</div>

.row-fluid > .inner-fluid {
    border: 5px none green;
    border-left-style: solid;
    border-right-style: solid;
}

解決策3：box-sizing

そのため、レスポンシブにはうまく反応しません（@mediaスタッキングに応じて境界線を設定するためのルールが必要です）

<div class="row foo">
        <div class="span3"></div>
        <div class="span6"></div>
        <div class="span3"></div>
</div>

.foo [class*="span"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.foo.row > [class*="span"]:first-child {
    border-left: 5px solid orange;
}
.foo.row > [class*="span"]:last-child {
    border-right: 5px solid orange;
}

私はあなたがあなたのサイズを見つけることを願っています。