EZ-SPARROW

タグ: BOOTSTRAP

  • bootstrap6 flex item のバグ修正

    col　のレイアウトで長いurlなどが含まれているコンテンツがレイアウトが乱れる場合がある。

    結果、colに以下のcssを追加で思い通りに表示された

    .col {
 min-width: 0;
}

    参考：https://kudakurage.hatenadiary.com/entry/2016/04/01/232722

  • Bootstrap4 card-columnsのbreakpointsを変更し表示card数を変更する方法

    Bootstrap4ではMasonryのような表示を可能にする.card-columns が加わった。

    https://getbootstrap.jp/docs/4.2/components/card/

    Responsiveに対応しているのだが、Breakpointブレークポイントを変更する方法が掲載されていなかったのでメモ。

    Cssで簡単に変更することができる。

    CSSでBootstrap4 card-columnsのbreakpointsを変更

    @media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}
@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}
@media (min-width: 992px) {
    .card-columns {
        column-count: 4;
    }
}
@media (min-width: 1200px) {
    .card-columns {
        column-count: 5;
    }
}

    SASSでBootstrap4 card-columnsのbreakpointsを変更

    .card-columns {
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(md) {
    column-count: 3;
  }
  @include media-breakpoint-only(sm) {
    column-count: 2;
  }
}

  • Bootstrapでnavbarの色を変更する方法

    Bootstrap3のnavbarの色を変更するには以下のCSS要素を変更する必要がある。

    .navbar-default {
  background-color: #9b59b6;
  border-color: #8e44ad;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ecdbff;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ecdbff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ecdbff;
  background-color: #8e44ad;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ecdbff;
  background-color: #8e44ad;
}
.navbar-default .navbar-toggle {
  border-color: #8e44ad;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #8e44ad;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ecdbff;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #8e44ad;
  }
}

    上記のコードを全て修正するのは結構な手間だが、これらを簡単に変更できるツールがある。

    [Googlead]

    Bootstrapでnavbarの色を変更できるツール

    TWBSColor

    カラーパレットから色を選ぶだけで必要なCSSを書き出してくれる。

    bootstrapのnabbarの色を変更

    [Googlead]