一部のグリッド仕様が効かず崩れる
一部のグリッド仕様が効かず崩れる
- このトピックには7件の返信、3人の参加者があり、最後に
により5年、 10ヶ月前に更新されました。
-
投稿
-
ヘッダーで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>テーマ及びプラグインともに最新版の環境です。
一度、ご確認お願いします。
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>か
があることを確認してみてください。ご返信ありがとうございます。
すみません。
該当する部分だけを書いて他を省略していました。<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様の方で起きない現象だとしますと、私の方で何か謝った設定しているのかもしれません。
ひょっとしたらこういうことなのでしょうか？
https://test02.rick-addison.com/2115.html
上記の様な状態なら私も発生しています。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>私の環境だけなのかもしれません。
お手数かけてしまって、すみません。CSSの
.sampleRow{}には何が書かれていますか？
ひょっとしたらそこに原因があるかもしれません。P.S.
あなたのサイトのURLを掲示してもらった方が解決が早くなると思います。
難なら新しくテスト用のサブドメインを取得し、テストサイトを構築し、同じ環境（記事データ以外）を再現してみると良いでしょう。
一応記事データとしてはテストデータなるものも存在しているのでそれをインポートしてみるのも良いでしょう。RICKさん、ご返信遅くなりましてすみません。
いろいろ調べていると、ブラウザーには開発ツールというのがありまして、そちらのモードで確認してみますと、半角など本来入れてない不要なタグが一杯・・。
ブラウザーのページの表示では、そういうのは表示されていなかったので、ちょっとびっくりでした。ただ、回避方法が分からなかったので、ひとまず、<div ・・・>の前のスペース（空白）を削除し、アップしたら、崩れることがなくなりました。
後、Ver5になってから、新しい画面になっていたのですが、こちらを使っていました。
ひとまず、前の画面仕様に変更してみたら・・と思ってClassic Editorというプラグインで変更しましたら、起こっていた現象がなくなりました。しばらく、Classic Editor環境でやっていこうと思います。
お騒がせしてすみません。m(_ _)m
ブロックエディタならHTMLを直接入力するためのブロックがあるので、タグを打ち込むならクラッシックエディタよりもHTMLブロックを使った方が確実だと思います。一度試してみてください。
- このトピックに返信するにはログインが必要です。
