navbarは冤罪、真犯人はrow　→ だと思ったらdevだった、死にたい - ドグサレ初心者のへっぽこビッグウェーブ

なぜか一部のページで横幅がおかしい件、要素の検証で辿っていったところ、
どうやらナビバーが悪さをしている可能性。
条件分岐でhomeやらtitleやらにターゲットを変えてたけどここなのか？

と思ったら全然違った。htmlの要素を一つずつ削って確認したら、以下の「row」要素があると横スクロール出てくることが判明。

<dev class="container ptb">
  <div class="row">
    <h2 class="centered mb">スタッフ情報</h2>
    <% @anime_details.each do |anime_detail| %>
        <p class="centered mb"><%= anime_detail.profile %></p>
    <% end %>
  </div><!-- /row -->
</dev><!-- /.container -->

rowの仕様がわからんよう

rowってなんじゃらほいと調べてみると、以下の情報あり。
Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお

ポイントは、コンテンツはcontainerクラスかcolクラスの内部に記述するようにすることだ。rowクラスの直下にはコンテンツを書いてはいけない。
というのも、Bootstrapのグリッドシステムは、(1)containerクラスがパディングを確保する。(2)rowクラスがネガティブマージンでそれを打ち消す。この組み合わせでコンテンツの始点が整列するように作られている。そのため、rowクラスの直下に何かを書くと、少し左にずれてしまうのだ。

多分これが原因ぽい。
けど、他のところでも同じようにrow直下にコンテンツ置いてるんだよなぁ。。。
なんでここだけおかしくなるのだろふか。

よくよく見てみると、直で書かずにpタグで囲んだり、containerを更に上からタグで囲んでたりしてたからたまたま影響出てなかったもよう。タグってこわい。

（containerの上から更に囲んでた例）

<div id="g">
  <div class="container">
    <div class="row centered">
      <h2>オープニングテーマ</h2>
      ....

（pタグで囲んでた例）

<div class="container">
  <div class="row centered">
    <p><strong>アニメタイトル:</strong></p>
    ....

とりあえず現状問題の場所をpタグで囲んでみた。ついでにクラスが被ってるとこも省略。

<dev class="container ptb">
  <div class="row centered">
    <p><h2>スタッフ情報</h2></p>
    <% @anime_details.each do |anime_detail| %>
        <p class="mb"><%= anime_detail.profile %></p>
    <% end %>
  </div><!-- /row -->
</dev><!-- /.container -->

実はこれを書いてた時点ですでに問題点は明確であった。。。

逆にpタグでおかしくなってた

直らないんだけど！もう！意固地か！！

いろいろやったけどもrowがあると横にちょっとはみ出る。どうあがいても絶望。

htmlを見直すと、最初のcontainerクラスがきちんと入れ子になっていない。
どうやら

タグでパーシャルを囲んでいたので、パーシャルの中身のcontainerがちゃんと動いてなかったぽい。

<p>
  <!-- details -->
  <%= render partial: 'anime_details/staffandcast', locals: { anime_title: @anime_title, anime_details: @anime_details } %>
</p>

とやると、パーシャルの中身のいろんなとこがpタグに囲まれてた。カオス。
[ _staffandcast.html.erb ]

<dev class="container ptb">
  <div class="row centered">
    <div class="col-md-8 col-md-offset-2">
      <p><h2>スタッフ情報</h2></p>
      <% @anime_details.each do |anime_detail| %>
          <p class="mb"><%= anime_detail.profile %></p>
      <% end %>
    </div>
  </div><!-- /row -->
</dev><!-- /.container -->

[ 作成されたhtml ]

<p>
  <!-- details -->
  <dev class="container ptb">
  </dev>
</p>
<div class="row centered">
  <div class="col-md-8 col-md-offset-2">
    <p></p><h2>スタッフ情報</h2><p></p>
    <p class="mb"> ※呼び出されたスタッフ情報 </p>
  </div>
</div>

pタグ外したらちゃんとした入れ子になりました。

widthが901pxから931pxに増えてる

次はwidthの設定がおかしくなっているところを確認。

<dev class="container">   ← width: 901px
  <div class="row centered">　← width: 931px
    <div class="col-md-8 col-md-offset-2">
      <h2>スタッフ情報</h2>
      <p class="mb"> ※呼び出されたスタッフ情報 </p>
    </div>
  </div><!-- /row -->
</dev>

上のコードをプレビューで見たらdevって黒文字になっててtypoしてることに気づいてワロタ。
ってかここまでこの記事に書き込んだコード全部devになっとるやんけ。
はてな記法すごい。スペルミスもわかっちゃう。

divにしたら全部解決しました。

あーまた死にたくなるやつやこれーあー

あー！

Rubymineのエラー表示の色が悪いせいだ！
と責任転嫁してみる。

とりあえずグリッドの中にクラスの無い

タグ入れるとカオスになるので他の場所も外しとこう。

にしても修正にほんと時間かかってしまった。もっとスマートに検証作業する方法はないものか。

今度レイアウト崩れあったらの検索から始めようとおもいました。

TODO:

フォームの例外処理エラーとか~~横幅とか~~いろいろおかしい件
トップからtitle/showへの遷移、２回目以降がなぜかおかしな位置（ページ中段）に遷移するので修正