24

プロジェクトの途中でブートストラップを実装するとレイアウトが壊れてしまい、css を変更して修正し、これをコメントアウトしました

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

bootstrap.css では、そのコアに影響しますか? プロジェクトでグリッドシステムを使用したいだけです..

4

4 に答える 4

60

私は同じ問題を抱えており、ブートストラップ 3 は既存のレイアウトとサードパーティのウィジェットを破壊します。難易度と安定性を高めるために私が試したことを次に示します。

最も簡単な方法

他のブートストラップ コンポーネントを使用しない場合にのみ安全

ブートストラップ css がロードされた後、次の css を追加します。

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

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

これはborder-box、グリッド システム内の要素に対してのみサイズ変更を使用します。グリッド内にカスタム ウィジェットがまだ適用されている場合、これは機能しませんborder-box。

より的を絞ったアプローチ

他のブートストラップ コンポーネントを使用しない場合にのみ安全

または、次のように、既に適用されcolているすべての列 div にカスタム クラスを追加することもできます。col-*-*

<div class="container">
    <div class="row">
        <div class="col-md-3 col">Grid still works</div>
        <div class="col-md-9 col">:)</div>
    </div>
</div>

次に、代わりに次の css を使用します。

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

.container .row .col,
.container .row .col:before,
.container .row .col:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

プロジェクトでブートストラップ グリッド システムのみを使用する必要がある場合、これは問題なく機能します。ただし、他のブートストラップ コンポーネントを使用する場合は、他のブートストラップ コンポーネントがborder-box設定に依存するため、このアプローチもお勧めしません。

修正する各要素を含むチェリーピック

さらに良い方法は、content-box次のようなウィジェットの特定の親要素でボックスのサイズをオーバーライドすることです。

.your-custom-widget-class *,
.your-custom-widget-class *:before,
.your-custom-widget-class *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

このアプローチは、現在は機能しているように見えても、将来のブートストラップ コンポーネントとの最高の上位互換性を提供します。

于 2013-11-20T19:31:48.850 に答える
12

はい、そうしないでください。を削除するbox-sizing: border-boxと、グリッドが台無しになります。参照: Bootstrap 3 が box-sizing: border-box に切り替わったのはなぜですか?

何が起こるかを示す例:

<div class="container" style="background-color:lightblue;"> 
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>
<br>
<div class="container nonborderbox" style="background-color:lightblue;">    
    <div class="row" style="background-color:red;"> 
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
        <div class="col-sm-6" style="background-color:orange"><p style="background-color:green">Content</p></div>
    </div>
</div>

と：

.nonborderbox *
{
-webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

上記の結果は次のようになります。

ここに画像の説明を入力

パディングによるガター構造でbox-sizing: border-boxは、列の幅の計算から外れます。

Bootstrap のグリッドと を理解box-sizing: border-boxし、これがレイアウトを台無しにする理由を理解してください。この問題を修正するか、プロジェクトで Bootstrap をまったく使用しないことを検討してください。

于 2013-10-01T06:59:53.340 に答える
3

これを mixin または変数 less に追加し、scaffolding.less 後に読み込まれることを確認します。bs3 ボックスのサイズをリセットし、特定の要素とすべての BS3 必須要素に再度適用します。デフォルトのBS3ボックスのサイジングによって作成されるほとんどの混乱は、それが適用されたときであることがわかりました

a,ul,li

魔法

* {
  .box-sizing(content-box);
}
form,
div,
img,
table,
th,
tr,
td,
p,
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
main, 
nav, 
section, 
summary,
audio,
canvas,
progress,
video,
[class^="container-"], 
[class^="container-"] *,
[class^="col-"], 
[class^="col-"] *,
[class^="form-"],
[class^="form-"] *,
[class^="bg-"],
[class^="bg-"] *,
[class^="navbar"],
[class^="navbar"] *,
[class^="nav"],
[class^="nav"] *,
[class^="row"],
[class^="row"] * {
  .box-sizing(border-box);
}
于 2014-04-04T10:28:45.003 に答える