携帯電話上でスライドするとbootstrap.cssの右側に空白が現れる問題を猛修復_html/css_WEB-ITnose

最近のプロジェクトは、フロントエンドで bootstrap.css + angularjs を使用し、バックエンドでのみデータを処理します (php が使用され、処理結果は直接 json_encode($arr) になります。これは非常にクールです) ）。 Chrome エミュレータのテストは完璧で、実機のテストはありませんでした。完了後、携帯電話でテストしたときに、ページを左右にスライドすると、空白の垂直バーが表示されました (下の図を参照)。 CSSを確認したところ、margin-rightの設定の長さが原因と判断しました。該当するコードはありませんでした。ブートストラップで問題が発生しているようです。プログラムの使用には影響しませんが、非常に扱いにくいので修正する必要があります。

ページを確認すると、この問題はグリッド システムを使用しているページでのみ発生することがわかります。 .row に関連する CSS を確認すると、そのマージンが次のように定義されていることがわかります。

.row{    margin-left:-15px;    margin-right:-15px;}

.row は、通常、container の従属要素として、また の上位要素として使用されます。列xx-xx。ちなみに、.container と con-xx-xx の CSS をチェックしてください:

.container{    padding-left:15px;    padding-right:15px;}.col-xx-xx{    padding-left:15px;    padding-right:15px;}

.container のすべての要素間の距離は 15px です。内側のマージンにより、非常に美しく見えます。.col-xx-xx には 15 ピクセルのパディングもあります。このままでは.containerの要素と揃えることができないので（.col-xx-xxと.containerの距離は30px）、最初のグリッド要素と最後のグリッド要素を{padding-leftにする必要がある: それぞれ 0px;}、{padding-right:0px;}。これで配置の問題は解決しましたが、設定後、各グリッドの幅は同じであるにもかかわらず、表示されるコンテンツの幅に 15px のギャップが生じます。そこで、FB の天才たちは、負の外枠のソリューションを巧みに採用しました。コードの実装が簡単なだけでなく、各グリッドに表示されるコンテンツの幅が一貫していないという問題も発生しません。

負の外側境界線の解決策は優れていますが、小さな画面 (モバイル端末) では空白の境界線の問題が発生します (問題点はこの記事で解決されます)。ブートストラップをカスタマイズするとこの問題は解決しますが、最も簡単な方法は該当する CSS を上書きすることです。

/* 需要在 bootstrap.css 之后调用 *//* Fuck 15px for iPhone Start */.row{margin:0;}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding:0;}/* Fuck 15px for iPhone Over */

グリッドにはパディングがなく、各フェンスの幅は同じで、表示されるコンテンツの幅も同じで、コンテナ要素と位置合わせすることもできるため、問題は解決されました (注: この結果も非常に深刻です。つまり、各グリッド間のコンテンツが互いに接続されます。これは、パディングを再定義し、コンテンツを内部グリッドの中央に配置することで解決できます。