PHP Foreachを使用している場合のブートストラップレイアウト

Question

現在、私のデータベースのコンテンツを、ブーストラップパネル内のforeachループを使用して表示しています。しかし、私はそれが期待通りにレイアウトは動作していません、私はレイアウトが現在よりも悪くなるのを修正したブレークを使って解決しようとしました。しかし、それはあなたが下の画像を見ている場合オフはまだです： - 私も持ってこれに加えて

ブートストラップドロップダウンメニューのdiv要素の中に埋め込まれているすべてを使用していないこと。私は、コードを自分のアプリケーションの私のテンプレート部分の内部ヘッダとフッタにある短いか欠けている部分を見えるかもしれませんが理由であるMVC形式を使用しています

<div class="parabox">   
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <!-- Search --> 
      <form class="navbar-form navbar-left"> 
       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search For Comics"> 
      </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <strong><p class="navbar-text">Sort Comics By : </p></strong> 
      <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Order Comics<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Ascending Order</a></li> 
       <li><a href="#">Descending Order</a></li> 
       <li><a href="#">Numerical Order</a></li> 
       </ul> 
       </li> 
      </ul> 

      <ul class="nav navbar-nav navbar-left"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Universe<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Dark Horse Comics</a></li> 
      <li><a href="#">DC</a></li> 
      <li><a href="#">IDW</a></li> 
      <li><a href="#">Image</a></li> 
      <li><a href="#">Marvel</a></li> 
      <li><a href="#">Valiant</a></li> 
      </li> 
      </ul> 
      </div> 
     </div> 
     </br> 

     <!-- Start of Col Div --> 
     <div class="col-md-12"> 
      <!--/.Panel for Comics --> 
      <!-- Count for Comics --> 
      <?php 
      if(count($comics)){ 
      ?> 
      </br> 
      <div class="panel panel-default"> 
       <div class="panel-heading panel-heading-green"> 
        <h3 class="panel-title">My Comics</h3>    
       </div>    
        <div class="panel-body"> 
        <div class="row"> 
       <!--/.row1 -->   
       <!-- Display each comic by id --> 
       <?php foreach($comics as $list): ?> 
         </br> 
         <div class="col-md-3 comic"> 
          <a href="#"> 
           <?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>      
          </a> 
          <div class="comic-title"> 
           <?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?> 
          </div> 
          <div class="comic-add"> 
          </div>       
         </div>  

      <!-- End of Foreach Statement for Comics --> 
      <?php endforeach; ?> 
      <!-- Else show this message if user has no entries --> 
      <?php 
      }else { 
       ?> 
       <p><b>You haven't posted any comic yet!</b></p> 
      <?php } ?> 
     </div> 
     </div> 
    </div> 
    <!--/.row1-collapse --> 
    </div> 
    <!-- /.container --> 
    </div> 

-

は、これは私のコードです。私がレイアウトを並べ替えるためにやっていることや、ドロップダウンメニューが動作するようにするために何ができるかについてのアイデアは、少しは関連しているようですね。この構造は入れ子にすることができる、

container 
    row 
     col 
     col 
     col 
    row 
     … 

構造を常に与えるべきである：だから

<div class="container"> 
    <div class="row"> 
     <div class="col-*">…</div> 
     <!-- many more cols --> 
    </div> 
</div> 

この：

Answer 1

は、私の知る限りでは、ブートストラップはいつものようなマークアップを持っている必要があります。

レイアウトはすべて、負のマージンの魔法は、私が（結果のマークアップが破損していることを推測掲載画像によると

UPDATE

を適用している。この方法»コンテナ>行>コル«構造であれば存在する）。私は、ブラウザコンソールを見て、結果として得られるdomツリーを予想と比較することをお勧めします。 Firefoxの破損した要素（欠落している終了タグや間違った属性など）が赤で表示されているため、ページソースを検索すると非常に役立ちます。そのため、バグを見つけるのに役立ちます。

Answer 2

*Create a wrapper div to hold the image, title etc. Then for that div add a css with the style as display:inline-block; So if it is not able to accomodate with in the view in browser, it will get automatically wrapped into the next line. Follow this example see teh working sample code created by some one: http://jsfiddle.net/ajruk60t/3/* 

Answer 3

行に含めることができる列の数の後に行を分割する必要があります。たとえば、col-3を使用する場合、4つ以上の列を定義してはなりません。この時点で、行を再作成して実行します。

<div class="row"> 
<?php 
$i = 1; 
foreach($comics as $list) { ?> 
    <div class="col-md-3"> 
     ... 
    </div> 
    <?php 
    if ($i % 4 == 0) { 
     ?></div><div class="row"><?php 
    } 
    $i++; 
?> 
<?php } ?> 
</div> 

また、行を再作成するのではなく手動のブレークポイントを追加して、同じ効果を作成することもできます。私自身は、このソリューションを試してみましたが、それをhereを読んでいない：

<div class="clearfix visible-md-block"></div> 

Answer 4

Thank you for your help it steered me to the answer which was the foreach loop had to start after the break. 

<?php require('template/header.phtml') ?> 
     <div class="container"> 

      <div class="row"> 
      <!-- Start of Col Div --> 
      <div class="col-md-12"> 
       <!--/.Panel for Comics --> 
       <!-- Count for Comics --> 
       <?php 
       if(count($comics)){ 
       ?> 
       </br> 
       <div class="panel panel-default"> 
        <div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3></div><!-- End of Panel Heading -->   
         <div class="panel-body"> 
         <div class="row"> 
        <!--/.row1 -->   
        <!-- Display each comic by id --> 
          </br> <?php foreach($comics as $list): ?> 
          <div class="col-md-3 comic"> 
           <a href="#"> 
            <?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>      
           </a> 
           <div class="comic-title"> 
            <?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?> 
           </div> 
           <div class="comic-add"> 
           </div>  
          </div> <!-- End of Col-MD-3 Comic --> 
       <!-- End of Foreach Statement for Comics --> 
       <?php endforeach; ?> 
       <!-- Else show this message if user has no entries --> 
       <?php 
       }else { 
        ?> 
        <p><b>You haven't posted any comic yet!</b></p> 
       <?php } ?> 
      </div><!-- end of row --> 
      </div> <!-- end of panel body --> 
     </div> <!-- end of panel panel-default --> 
     <!--/.row1-collapse --> 
     </div> <!-- end of col-md-12 --> 
     </div> <!-- End of Row --> 
    </div> <!-- /.container --> 
    <?php require('template/footer.phtml') ?>