1

Bootstrap を使用していますが、固定 (応答しない) レイアウトで奇妙なレイアウトの問題が発生しています。

BS スキャフォールディング構文を使用して、グリッドにいくつかのネストされた div があります。通常、見た目も動作も問題ありません。ただし、ページをリロードすると、ページ全体で div が壊れることがあります (ヘッダー ナビゲーション、メイン コンテンツの div など)。

この問題を再現することはできません。必要なときに必要な方法で動作しているように見えます (再度、リフレッシュ/リロードしたとき)。

これは、問題が発生したときの様子と、常にどのように見えるべきかを示すスクリーンショットです。

良い 1 http://static.inky.ws/image/3486/ss-1-good.jpg

悪い 1 http://static.inky.ws/image/3485/ss-1-bad.jpg

(この投稿にこれ以上 URL を追加することはできません。もっと見たい場合は、上記の 2 つを 3487/ss-2-good.jpg & 3484/ss-2-bad.jpg に変更できます)

実行した手順 (プラスの効果なし):

-グリッドをやり直す

-カスタムCSSを1行ずつ調べて、部分を削除することで問題が解決するかどうかを確認します

- パス、Web ページ内のファイルの順序などを確認します。

-検索、検索、また検索

基本的な HTML 構造は次のとおりです。

   <div class="container"> 

<?php require ("includes/nav-top.php") ;?>
  <!--page header -->
  <div class="row" id="">
    <div class="span6">
         ... content ...
    </div>
    <div class="span6">
        ... content ...
    </div>
  </div>
  <div class="row">
       ... content ...
  </div>
  <div class="row-fluid">
    <div class="span8">
      <div class="span6">
          ... content ...
      </div>


      <div class="span6">
          ... content ...
      </div>


      <div class="row-fluid">
        <div class="span6">
            ... content ...
        </div>
        <div class="span6">
            ... content ...
        </div>
      </div>
      <!--row-fluid--> 

    </div>
    <!--span8-->

    <div class="span4">
       ... content ...
    </div>
    <!--span4--> 

  </div>
  <!--row-->

  <div id="" class="row">
    <div class="span4">
        ... content ...
    </div>
    <div class="span4">
      ... content ...
    </div>
    <div class="span4">
     ... content ...
    </div>
  </div>
  <!--row-->

  <footer>
   ... content ...
  </footer>
</div>
<!--container-->

次のように外部ファイルをロードしています。

頭：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="css/bootstrap.css">

<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>

終了 BODY タグの前:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script> 
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>

ノート：

-私が言ったように、これは10回連続して発生する可能性があり、次の5回の更新/再読み込みで問題ないように見えます

- ロードされた上記のファイルには、Fancybox (i-modal.php) とカスタム JS (i-js.php) のインクルードがあります。これらのファイルには、これを引き起こす可能性のある CSS やその他のものはありません。

-現在、BS の上書き (bootstrap-config.css) は空です。何かを追加すると、マージンやパディングがあるかどうかに関係なく、問題が発生するようです。

-私の調査によると、ネストされたグリッドセクションに「行流体」を使用することは、それ以外の場合は固定されたレイアウトで許可されているようです

-これまでのところ、Safari / OSX でのテストでは、他のブラウザーでは問題は見られませんでしたが、選択した場合に発生すると言ったように。

それで。このすべての後、これらの症状が知識のある人に何を示唆するのか疑問に思っていると思います. Bootstrap は傑出しており、多くの点で私の夢のツールです。このような経験をした人はいますか?

これを読んでくれてありがとう。

4

1 に答える 1

4

まず、レイアウトに不適切な構造があり、次のようになります。

  <div class="row" id="">
    <div class="span6">
      <div class="row">
        <div class="span3">
         ... content ...
        </div>
        <div class="span3">
         ... content ...
        </div>
      </div>
    </div>
    <div class="span6">
        ... content ...
    </div>
  </div>
  <div class="row">
     <div class="span12">
       ... content ...
     </div>
  </div>
  <div class="row-fluid">
    <div class="span8">
      <div class="row-fluid">
        <div class="span6">
            ... content ...
        </div>
        <div class="span6">
            ... content ...
        </div>
      </div>
    </div>
  </div>

次の規則に従う必要があります。

  • 固定レイアウトで行流体を使用しないでください。
  • 全幅スパンは12です。
  • コンテンツはスパン内にある必要があります - 常に
  • サブスパンは行にある必要があります - 常に
  • サブ行のスパンの合計は、コンテナーのスパンと等しくなければなりません (行流体には関係ありません)。span8 では、span6 と span2 で行を配置できます
  • 何をしているのかよくわからない場合は、ブートストラップ CSS をいじらないでください。
  • BS と同じ方法でカスタム CSS クラスに誤って名前を付けていないか確認してください

それらを修正すると、表示の問題が修正されるはずです。

于 2013-06-17T17:03:34.253 に答える