グリッド 左右の隙間を消す
2021-07-01
参考サイト1:https://www.webdesignleaves.com/pr/plugins/bootstrap4_01.html
参考サイト2:https://getbootstrap.jp/docs/4.2/layout/grid/
row、colの左右のmargin、paddingを無くしたいとき
「row」に「no-gutters」を追加します。
両サイドの隙間・col間の隙間が無くなります。
col-sm-4
左右の間隔がなくなり横の要素とくっつきます。
col-sm-4
左右の間隔がなくなり横の要素とくっつきます。
col-sm-4
左右の間隔がなくなり横の要素とくっつきます。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row no-gutters"> <div class="col-sm-4"> <p class="gray-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p> </div> <div class="col-sm-4"> <p class="Blue-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p> </div> <div class="col-sm-4"> <p class="gray-box">col-sm-4<br>左右の間隔がなくなり横の要素とくっつきます。</p> </div> </div> |