React Bootstrapで右に出る余白なんやねん

1926 ワード
HTML next.js React bootstrap4 CSS HTML テキストリンク

ご無沙汰してます、おおのんです。
今日はBootstrapに関すること。（あんまりReact関係ない）

右に余白がいてはる

とある日、Bootstrapを使って画面を作っていました。
レスポンシブ対応でスマホ画面サイズで見てみると、右に余白が！！！

どこが悪さしてるのか見てみると・・・

ここだった。

本来指定した領域をはみ出して表示しちゃってますので、overflow: hiddenしてみる。

index.js
..省略..
  return (
    <div className="overflow-hidden">
      <Carousel />
      <Row className="justify-content-center" md={10}>
..省略..

すると・・・！

余白を消し去ることに成功しました。