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

[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>

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

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

[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>か
があることを確認してみてください。

[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様の方で起きない現象だとしますと、私の方で何か謝った設定しているのかもしれません。

[DRILL LANCER]

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

[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>

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

[DRILL LANCER]

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

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

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

[traveller]

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

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

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

Classic Editor

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

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

[石川＠Vektor,Inc.]

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

[投稿者]

投稿