最近のプロジェクトフロントデスクでは、Bootstrap.CSS + AngularJSを使用しており、背景のみがデータを処理します（PHPを使用すると、処理結果はJSON_ENCODE（$ arr）であり、非常にクールです）。 Chromeでのシミュレーションマシンテストは完璧であり、実際の機械テストはありません。それを完了した後、電話でテストしていたときにst然としました。ページを左右にスワイプすると、空白の垂直バーが表示されました（下の図に示すように）。マージン右に設定された長さが原因であると判断されます。 CSSを確認すると、関連するコードがありません。問題はブートストラップで発生しているようです。プログラムの使用には影響しませんが、非常に厄介で、修正する必要があります。
ページを確認し、この問題がグリッドシステムを使用しているページが使用されている場合にのみ発生することを確認します。 .row関連のCSSを確認し、そのマージンの定義が次のとおりであることがわかります。
.row {マージン左：-15px;マージン右：-15px;}.rowは、一般に、コンテナの下部要素として、および.col-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の内側のマージンも15pxを設定します。これは、.contarinerの要素（.col-xx-xxと.containerの間の距離は30px）とは整合していないため、最初のラスター要素と最後のラスター要素を{padding-left：0px;}および{padding-right：0px;}に設定する必要があります。これはアライメントの問題を解決しますが、設定後、各グリッドの幅は同じですが、表示されたコンテンツの幅は15pxです。したがって、FBの天才は、負の外側の境界線の解決策を巧みに採用しました。コードの実装が単純であるだけでなく、各ラスターに表示されるコンテンツの一貫性のない幅の問題はありませんでした。
負の外側の境界線の解決は良好ですが、小さな画面（モバイルターミナル）に空白の境界線を引き起こします（この記事では解決するペインポイント）。ブートストラップをカスタマイズするとこの問題は解決しますが、面倒です。最も簡単な方法は、関連するCSSを書き直すことです。
/* bootstrap.cssの後にiPhoneの開始に対応する必要があります* //* iPhoneのために15px */。row {マージン：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-8、.col-md-8、.col-md-8、 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 iPhoneの15pxをめぐる */グリッドにパディングがなく、各フェンスの幅が同じであり、表示されたコンテンツの幅も同じであるため、それは成功裏に解決しました。また、コンテナの要素と整列することができます（注：この結果は非常に深刻です。
上記は、Bootstrap.CSSが携帯電話でスワイプされているときの右側の空白スペースの理由とソリューションです。私はそれが誰にでも役立つことを願っています！