質問: ### 分からないこと Bootstrapを構成しているcssファイルの中で、bootstrap.css以外のcssファイルのブレイクポイントも変更しなければいけないのでしょうか。 それに際して、bootstrapを構成するファイルの役割、そもそもbootstrap自体の機能についても軽く教えていただけると嬉しいです。 (※当方CSSについては勉強し始めたばかりで、レスポンシブデザインを使うに際してBootstrapを知ったばかりなので見当違いなことを言っているかもしれませんが、優しく教えていただけると幸いです。) ### ここまでの経緯 まずBootstrapを導入することにしたのですが、ブレイクポイントを変更したかったので、いくつかのサイトを参考にして、Bootstrap4のsassファイルをダウンロードして_variables.scssのブレイクポイントを変更、bootstrap.scssをbootstrap.cssに変換しました。 参考にしたサイト その後Bootstrap4のコンパイル済みファイルをダウンロードして、css/bootstrap.cssと先ほどコンパイルしたファイルを置き換えました。 確かにbootstrap.cssのブレイクポイントは正常に変更されていますが、他のcssファイル(例えばbootstrap-grid.css)の中身を見ると、当たり前ですが変更前のブレイクポイントが記述されています。 bootstrap.css以外は関係ないのでこのままでいいのですか? それとも他のファイルとbootstrap.cssのブレイクポイントが異なっていることによる問題があるので、他のcssファイルのブレイクポイントも手動で変更する必要があるのでしょうか。 初歩的な質問で申し訳ないです。よろしくお願いします。
回答: はじめまして はじめに確認させてください ご提示の記事が言っている「ブレイクポイントの変更」というのは、 ``` $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default; ``` を ``` $grid-breakpoints: ( xs: 0, sm: 200px, md: 400px, lg: 600px, xl: 1200px ) !default; ``` というように値のみ変更するということですが、 > > 当たり前ですが変更前のブレイクポイントが記述されています > > > から察するに、新たに`$grid-breakpoints2`のような変数を定義してブレイクポイントを変更しているのではないかと思ったのですがいかがでしょうか? Bootstrapは`_variables.scss`に全ての変数が収まっているため、ブレイクポイントをはじめ色やサイズなどもここを編集すれば全てのコンポーネントのスタイルが変わるようになっています そのため、変更前のブレイクポイントが記述されている状況にはならないかなと思います 見当違いでしたらすみません