Bootstrap のメイン コンテナが本体の上部やナビゲーション バーの後ろにならないようにするには、次のようにパディングを追加する必要があることを理解しています。
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
パディングが小さなデバイスで問題を引き起こしてサイトの応答性を壊さないようにするには、パディングを bootstrap.css と bootstrap-responsive.css の間で宣言する必要があります。
私の質問：
私は、 Bootstrap Customizeからダウンロードした、combinde bootstrap.css ファイルを使用しています。このファイルには、レスポンシブと通常の css が 1 つのファイルに結合されています。
それらは1つのファイルに結合されているため、実際にbootstrap.cssファイルに修正を追加しないと、この質問の冒頭で説明したソリューションを使用できないことを意味します(そこに追加したくない、長い話) .
したがって、このコードを配置する代わりに考えていました（小さなデバイス用の@media修正を使用）：
body { padding-top: 60px; }
@media (max-width: 979px) { body { padding-top: 0; } }
自分の css ファイル (main.css) に追加し、次のように、html の bootstrap.css の後に含めます。
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
この解決策は受け入れられると思いますか?