HOME フォーラム バグ報告と提案 bootstrapグリッドカラム落ちについて

このトピックには5件の返信が含まれ、2人の参加者がいます。1 年前 jnak さんが最後の更新を行いました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #8149

    jnak
    参加者

    bootstrapを使ってグリッドレイアウトを組んだのですが、safariでカラム落ちします。

    <div class="row">
    <div class="col-md-4">
    a
    </div>
    <div class="col-md-4">
    b
    </div>
    <div class="col-md-4">
    c
    </div>
    </div>

    cがsafariでの表示でどうしても落ちてしまいます。
    cssで.col-md-4{width: 33.3333%;} を33.2%などいじるとカラム落ちしません。
    バグなのか定かではないですが、同じような状態の方いますでしょうか?

    ご確認宜しくお願い致します。

    宜しくお願い致します。

    #8150
    じょに次郎
    じょに次郎
    モデレーター

    僕の環境で上記コードで確認した所特に問題でませんでした。

    他のCSSが干渉してるとか、中の要素の見えない余白などがはみ出してるとか…?

    #8152

    jnak
    参加者

    本当ですか?
    ありがとうございます。

    もう少し見てみます!

    #8153

    jnak
    参加者

    コードを見直しました。
    <div class=”row row-eq-height”>
    <div class=”col-md-4″>
    a
    </div>
    <div class=”col-md-4″>
    b
    </div>
    <div class=”col-md-4″>
    c
    </div>
    </div>

    CSSにこう記述しています

    .row-eq-height {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    }

    どうやらこれが原因だったようです。
    どこかおかしいところはあればどなたかご指摘ください。
    宜しくお願い致します。

    #8155
    じょに次郎
    じょに次郎
    モデレーター
    .row.row-eq-height .col-md-4{
    width:33.2%;
    }

    たぶんこれで。

    #8171

    jnak
    参加者

    ありがとうございます。

6件の投稿を表示中 - 1 - 6件目 (全6件中)

このトピックに返信するにはログインが必要です。