日々精進

新しく学んだことを書き留めていきます

Bootstrapで<div class="row">をoverflow-y: auto;なdivの中に置くと横スクロールバーが出る

原因はrowクラスが左右に-15pxのマージンを持っており、

自体は親Elementからはみ出しているため。

以下によると、新しいバージョンのBootでは解決しているようなので、Bootstrapのバージョンを上げたら直る。

stackoverflow.com

それが難しいようなら以下を定義すると直る。

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

でもBootstrapのクラスを上書きしたくない。。

dirty & quickなやり方としては以下をrow divの親Elementに追加するやり方がある。

overflow-x:hidden

これはスクロールバーを無理矢理隠してるだけなのであまりやりたくないが。。

参考: