一部のグリッド仕様が効かず崩れる

VWSとは フォーラム Lightning 一部のグリッド仕様が効かず崩れる

一部のグリッド仕様が効かず崩れる

  • このトピックには7件の返信、3人の参加者があり、最後にtravellerにより5年、 8ヶ月前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #14658

    traveller
    参加者

    ヘッダーでBootstrapが効かない(現在は対応済み)現象がありましたので、固定ページで試してみました。
    テーマ側かプラグイン側の影響か分からないのですが、下記タイプのグリッドが効かない(段落ち)ようで崩れます。

    <div class=”row sampleRow”>
    <div class=”col-xs-12 col-sm-4 col-md-4″>サンプルサンプルサンプルサンプルサンプル</div>
    <div class=”col-xs-12 col-sm-8 col-md-8″>サンプル</div>
    </div>

    テーマ及びプラグインともに最新版の環境です。

    一度、ご確認お願いします。

    #14660

    DRILL LANCER
    モデレーター

    Bootstrapのグリッドシステムは

    <div class="container">
    	<div class="row">
    		<div class="col-xs-12 col-sm-4">サンプルサンプル</div>
    		<div class="col-xs-12 col-sm-8">サンプル</div>
    	</div>
    </div>

    で1セットです。

    <div class="row sampleRow">の外側に
    <div class="container"></div>
    <div class="container-fluid"></div>
    があることを確認してみてください。

    #14661

    traveller
    参加者

    ご返信ありがとうございます。

    すみません。
    該当する部分だけを書いて他を省略していました。

    <div class=”container”> </div> の方は、つけております。

    下記のグリッド設定では、どうしても崩れるんですよね・・。

    <div class=”col-xs-12 col-sm-4 col-md-4″>サンプルサンプルサンプルサンプルサンプル</div>
    <div class=”col-xs-12 col-sm-8 col-md-8″>サンプル</div>

    私の方では、現象が起こるんですが、RICK様の方で起きない現象だとしますと、私の方で何か謝った設定しているのかもしれません。

    #14662

    DRILL LANCER
    モデレーター

    ひょっとしたらこういうことなのでしょうか?
    https://test02.rick-addison.com/2115.html
    上記の様な状態なら私も発生しています。

    #14663

    traveller
    参加者

    RICK様
    ご返信ありがとうございます。

    ご提示のページご確認させていただきました。
    ご提示いただいたにもかかわらず、すみませんが、私の現象は、リンクしていただきましたページとはちょっと違うようです。

    同じ箇所で、

    <div class=”col-xs-12 col-sm-3 col-md-3″>サンプルサンプルサンプルサンプルサンプル</div>
    <div class=”col-xs-12 col-sm-9 col-md-9″>サンプル</div>

    ですと、段落ちなどなく表示されるのですが、下記のパターンだけ、崩れる(段落ち)するんです。

    <div class=”col-xs-12 col-sm-4 col-md-4″>サンプルサンプルサンプルサンプルサンプル</div>
    <div class=”col-xs-12 col-sm-8 col-md-8″>サンプル</div>

    私の環境だけなのかもしれません。
    お手数かけてしまって、すみません。

    #14681

    DRILL LANCER
    モデレーター

    CSSの.sampleRow{}には何が書かれていますか?
    ひょっとしたらそこに原因があるかもしれません。

    P.S.
    あなたのサイトのURLを掲示してもらった方が解決が早くなると思います。
    難なら新しくテスト用のサブドメインを取得し、テストサイトを構築し、同じ環境(記事データ以外)を再現してみると良いでしょう。
    一応記事データとしてはテストデータなるものも存在しているのでそれをインポートしてみるのも良いでしょう。

    • この返信は5年、 8ヶ月前にDRILL LANCERが編集しました。
    #14691

    traveller
    参加者

    RICKさん、ご返信遅くなりましてすみません。

    いろいろ調べていると、ブラウザーには開発ツールというのがありまして、そちらのモードで確認してみますと、半角など本来入れてない不要なタグが一杯・・。
    ブラウザーのページの表示では、そういうのは表示されていなかったので、ちょっとびっくりでした。

    ただ、回避方法が分からなかったので、ひとまず、<div ・・・>の前のスペース(空白)を削除し、アップしたら、崩れることがなくなりました。
    後、Ver5になってから、新しい画面になっていたのですが、こちらを使っていました。
    ひとまず、前の画面仕様に変更してみたら・・と思ってClassic Editorというプラグインで変更しましたら、起こっていた現象がなくなりました。

    Classic Editor

    しばらく、Classic Editor環境でやっていこうと思います。

    お騒がせしてすみません。m(_ _)m

    #14706

    ブロックエディタならHTMLを直接入力するためのブロックがあるので、タグを打ち込むならクラッシックエディタよりもHTMLブロックを使った方が確実だと思います。一度試してみてください。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。