10

私はこれまでのプロジェクトで「ボーダー ボックス モデル」を使用してきました。これには、ここでは説明しきれない多くの利点があります。しかし、ここでそれについて読むことができます: css-tricks の Border-box

現在、私はより大きなプロジェクトを開始しており、Twitter ブートストラップが私たちのニーズに適したソリューションになると判断しました。すべてを壊さずに「ボーダーボックス」にすることができるかどうか疑問に思っていました。誰かがこれを試したことがありますか?結果はどうなりますか? 調整多すぎない？本当の改善？

ありがとうございました

4

2 に答える 2

16

はい。

これは、Bootstrap で使用できる mixin です。すべてのベンダー プレフィックスが自動的に追加されます。

*, *:before, *:after {
    .box-sizing(border-box);
}

input {
    .box-sizing(content-box);
}

入力には引き続きコンテンツ ボックスが必要です。そうしないと、小さすぎます。

于 2013-03-19T09:24:58.193 に答える
7

これにより、流動的/レスポンシブなデザインでの作業が大幅に簡素化されます。いくつかの複雑なレイアウトや、一定の間隔が必要な場合は、を使用しないとほぼ不可能ですborder-box。

私は最近これを使用しました（FTW！）：

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

かなり大きなサイトで、実際に多くの問題を解決したことがわかりました。IE7 のサポートが必要な場合、私のアプローチは、そのブラウザーにサイトの固定幅バージョンを提供し、必要な場合にのみこのポリフィルを使用することでした.*

私は本当に欠点を見つけていません.50％幅の2つの列を指定し、追加paddingして、それがうまくいくことを知っているのは安心です. 標準に依存する可能性がある場所ではbox-model、特定の要素についていつでも標準に戻すことができます。

ブートストラップ固有

特に Bootstrap の使用に関しては、いくつかの問題が発生する可能性があります。テストすることをお勧めします。余談ですが、上記の CSS をBootstrap ホームページに追加しても問題はありませんでした。

Bootstrap 2.x に組み込まれているメイン グリッド システムはfloatとmarginを使用するため、 を変更しbox-modelても影響はありません (padding列に直接追加できるようになるだけです)。

Bootstrap 3はモバイル ファーストのアプローチに移行しています (そして IE7 のサポートは完全に廃止されています)。それには以下が含まれます：

[A] 新しいシングル グリッド システム (引き続き を使用) は、ピクセル幅とマージンの代わりに.row、パーセンテージ幅、パディングを使用します。box-sizing: border-box

したがって、彼らは明らかにこのアプローチを採用するメリットを信じています。

* 私の考えでは、私はすでに Modernizr の HTML shim に依存しているため、ブラウザーはレイアウトに関して既に JS に依存しています。幅を変数として格納する SASS を使用すると、これは非常にスムーズに機能します。とはいえ、特定のプロジェクトで古い IE の使用率が高い場合、このアプローチは適切ではなくなります。

于 2013-03-14T10:11:37.037 に答える