テストサーバーにアップしたらえらいことになっていた

製作していたECサイトのトップページが

とりあえず一通り完成したので

試しにサーバーにあげてチェックしてみた

なんかいろいろおかしい

[ mac safai ]

bootstrapのアイコンが表示されていない

　ー＞ safaiのセキュリティーの設定で読み込みをブロックしていたらしい

[firefox]

スライダーが動いた時に画像がバグる

　ー＞原因不明、bootstrapのカルーセルのソースコードには

　　　style="background:#green" を都合でつけていた。

　　　それが上に乗っている画像とかぶっていたので style を削除

[android]

.collapse をつかったスライドダウンのエフェクト時に

ボタンの表示が大きくなってもとに戻らない( 謎 )

　　　ー＞未解決

[ * ]

画面の右端に変な隙間がある

スライダーの矢印の位置が画面からはみ出す

　　　ー＞col とrow の使い方に誤りがあった

/ 以下　メモ /

画面に変な隙間がある

最初 container-fluid　を知らずに
画面幅いっぱいにするために
containerをつけずに row と col をせっていしていた。
あとで間違いだと気付いたが、その全部を修正しきれていなかったようだ
しかも、hidden-sm などで見えなくなっているところに効いていたのでなかなか見つけられなかった

すべて訂正してなおったかに見えた...

スマホで見るとまた変な隙間ができる

画面幅が最小の時のスタイルを疑う

ボタンの中に設定していた row と col の設定と
そこに記述したテキストの長さが関わって
ボタンの大きさがゆがんでいた

２つ設定していたボタンの構造

<div class="col col-lg-offset2 col-lg-8 col-md-offset-2 col-lg-8 col-sm-offset-2 col-sm-8 col-xs-offset-2 col-xs-8">
<img src="image/keitai2.png" height="150" width="320" class="img-responsive">
</div>

<div class="col col-lg-2 col-md-2 col-sm-2 col-xs-2"> </div>

<div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
<p class="lead">機種から探す</p>
</div>

</button>
</div>
</div>

(もう一つ同じものを col で 6 づつの幅に設定)

...

一行の中に 2つの列を6づつに設定し　それぞれに　ボタンを配置
そのボタンの中に列をつくり 2(余白) 8(画像) 2(余白) として　左右に 2 づつの余白をとった
さらにその下にキャプションのように文字を入れたかったが .captionではうまくいかなかったので
もう一つ幅12の列を作って折り返しによって下に回り込ませている
が
これが悪さをした

最初のボタンの文字は　機種から探す　で
もう一方のボタンは　デザイナーから探す　だった
この文字数の差でレイアウトが崩れた
デザイナーから探す　だと　長すぎて　画面幅が最小の時にボタンの幅 12 分よりも幅をとって列の幅を変形させていた
これが行の幅の外にはみ出して　右側にへんな余白が生まれていた

ので
(container と row のなかに入っている)

<div class="row">
<div class="col">
<p class="lead">デザイナーから探す</p>
</div>
</div>

</button>

</div>

</div>
</div>

ボタンを 6　づつの幅で配置するのは変わらない
その中に余白と画像の行とテキストの行の二つを設定して
切り離したらうまくいった。