Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap-Struktur

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bootstrap-Struktur

    Hi Leute, also ich habe folgendes Problem: laut Shoelace muss die Struktur wie folgt aussehen:

    HTML-Code:
    <div class="container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8"></div>
            <div class="col-sm-2"></div>
            <div class="col-sm-2"></div>
            <div class="col-sm-offset-8 col-sm-2"></div>
        </div>
    </div>
    Das habe ich meiner Meinung nach auch genau so übernommen. Nur bei mir macht er das(1 Box links, 1 mitte und 3 rechts, es sollen aber 2 links, 1 mitte und 2 rechts sein.):
    phpforum.jpg


    PHP-Code:
    <?php echo $header?><?php echo $column_left?><?php echo $column_right?>
    <?php
      
    // Connection to DB
      
    $con mysqli_connect("localhost","root","","mal");
    ?>
    HTML-Code:
    <link rel="stylesheet" href="http://www.tdc-technologies.com/bootstrap/css/bootstrap.min.css">
    <script src="http://www.tdc-technologies.com/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
      <div class="breadcrumb">
    PHP-Code:
      <?php foreach ($breadcrumbs as $breadcrumb) { ?>
      <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
      <?php ?>
    HTML-Code:
      </div>
    <div class="container" style="margin-left:20px;">
    <div class="row">
    <div class="col-sm-2 addbox">Chiptuning</div>
    <div class="col-sm-8" style="border:1px solid red;width:640px;margin-left:15px;">
    PHP-Code:
    <?php $link "index.php?route=information/battery&choice="?>
    <?php $ah 
    "index.php?route=information/battery&ah="?>
    <?php 
    if(!isset($_GET['choice']) && !isset($_GET['ah'])) { ?>
    HTML-Code:
     <div class="row" style="width:585px;text-align:center;margin-left:0px;">
            <a href="<?php echo $link; ?>AUTO">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/AUTO.jpg" /></div>
                <div class="battery-text"><?php echo $automarke; ?></div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>50">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/50.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>50Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>60">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/60.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>60Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>70">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/70.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>70Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>80">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/80.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>80Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>90">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/90.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>90Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>100">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/100.jpg" /></div>
                <div class="battery-text"><?php echo $upto; ?>100Ah</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>AGM">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/AGM.jpg" /></div>
                <div class="battery-text">AGM</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>EFB">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/EFB.jpg" /></div>
                <div class="battery-text">EFB - Start/Stop Fahrzeuge</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>PRO">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/PRO.jpg" /></div>
                <div class="battery-text">Power Bull PRO</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>UNI">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/UNI.jpg" /></div>
                <div class="battery-text">Universal</div>
              </div>
            </div>
            </a>
            <a href="<?php echo $ah; ?>BACKUP">
            <div class="col-sm-4 boxcontainer">
              <div class="graybox">
                <div><img src="image/batteries/BACKUP.jpg" /></div>
                <div class="battery-text">BackUp</div>
              </div>
            </div>
            </a>
        </div>
    PHP-Code:
    <?php ?>
      <?php if(isset($_GET['choice']) && $_GET['choice']=="AUTO") { ?> <!-- Anfang Autoabfrage -->
    <!-- MARKEN + Modell !-->
    HTML-Code:
    <div class="list-group">
                      <!-- MARKEN !-->
                      <div id="marken">
    PHP-Code:
     <?php
                        $anfrage  
    "SELECT DISTINCT auto_marke
                                     FROM bat_autos"
    ;
                        
    $ergebnis mysqli_query($con,$anfrage);
                        
    $i 0;
                        while(
    $row mysqli_fetch_assoc($ergebnis)) {
                          print 
    "\n\t\t\t<div class='markenlink'><a class='list-group-item' href='?route=information/battery&choice=AUTO&m=".strtolower($row['auto_marke'])."' >".$row['auto_marke']."</a></div>";
                        
    $i++;
                        if(
    $i == 0)
                          print 
    "<div class='row'></div>";
                        }
                      
    ?>
    HTML-Code:
    </div>
              </div>
    PHP-Code:
     <?php if(isset($_GET['m'])) { ?><script>document.getElementById("marken").style.display = "none";document.getElementById("banner").style.display = "none";</script><?php ?>
                      <!-- Fahrzeugtyp !-->
                      <?php if(isset($_GET['m'])) { ?>
    HTML-Code:
      <div id="typ" align="center">  
                            <table id="typen" class="table table-hover" style="width:100%;">
                              <thead>
                                <th><?php echo $model; ?></th>
                                <th><?php echo 'Baujahr' ?></th>
                              </thead>
                              <tbody>
                              <tr>
    PHP-Code:
     <?php
                                
    if(isset($_GET['m'])){
                                
    $anfrage "SELECT *
                                            FROM `bat_autos`
                                            WHERE `auto_marke`='"
    .$_GET['m']."'
                                            "
    ;
                                
    $ergebnis mysqli_query($con,$anfrage);
                                
    $i 0;
                                while(
    $row mysqli_fetch_assoc($ergebnis)) {
                                  
    $link "?route=information/battery&choice=AUTO&m=".$_GET['m']."&mo=".$row['auto_modell']."";
                                  
    ?>
                                  <td><a href="<?php echo $link?>"><?php echo $row['auto_modell'];?></a></td>
                                  <td><a href="<?php echo $link?>"><?php echo $row['auto_baujahr'];?></a></td>
                                  <?php
                                  $i
    ++;
                                  if(
    $i == 0)
                                  print 
    "\n\t\t\t  </tr>\n\t\t\t  <tr>\n";
                                }
                              }
                                
    ?>
    HTML-Code:
    </tr>
                              </tbody>
                            </table>
                      </div>
    PHP-Code:
       <?php ?>
      <?php ?> <!-- Ende Autoabfrage -->
                      <?php if(isset($_GET['mo'])) { ?><script>document.getElementById("typ").style.display = "none";</script><?php ?>
                      
                      <?php if(isset($_GET['mo']) OR isset($_GET['ah'])) { ?>
                      <!-- Batterien !-->
                      <?php
                        $header 
    "";
                        if(isset(
    $_GET['mo'])) {
                        
    $header strtoupper($_GET['m'])."&nbsp;&nbsp;&nbsp;".$_GET['mo'];
                        }
                      
    ?>
    HTML-Code:
      <div align="center" class="row">
                            <div id="batteries" class="boxes">
    PHP-Code:
      <?php
                            $anfrage 
    "SELECT bt.typ,bt.length,bt.width,bt.height,bt.bat_height,bt.ah,mal.price,bt.schaltung,bt.aen,mal.product_id FROM `bat_typen` bt INNER JOIN `oc_product` as mal ON mal.model = bt.typ";

                              if(isset(
    $_GET['mo'])) {
                                
    $auto_filter "auto_modell = '".$_GET['mo']."'";
                                
    $anfrage .= "
                                WHERE typ IN(
                                    SELECT typ1 FROM bat_autos WHERE "
    .$auto_filter."
                                    UNION
                                    SELECT typ2 FROM bat_autos WHERE "
    .$auto_filter."
                                    UNION
                                    SELECT typ3 FROM bat_autos WHERE "
    .$auto_filter."
                                    UNION
                                    SELECT typ4 FROM bat_autos WHERE "
    .$auto_filter."
                                    UNION
                                    SELECT typ5 FROM bat_autos WHERE "
    .$auto_filter."
                                    )"
    ;
                              } elseif(isset(
    $_GET['ah'])) {
                                
    $anfrage .= " WHERE ah < '".$_GET['ah']."'";
                              }
                              
    //echo "SQL: " . $anfrage . "<br>";
                              
    $ergebnis mysqli_query($con,$anfrage);
                              while(
    $row mysqli_fetch_assoc($ergebnis)) {
                                    
    $bild "image/data/batterien/".$row['typ'].".jpg";
                                    if(!
    file_exists($bild)) { $bild "image/data/battery.jpg";}
                                    
    ?>
    HTML-Code:
     <div class="container-fluid" style="border:1px solid red;margin-bottom:20px;margin-left:100x;width:480px;">
                                    <div style="border:1px solid #DDDDDD;height:219px;">
                                      <div class="col-sm-3 left" style="text-align:left;border:0px solid red;">
                                        <img src="<?php echo $bild; ?>" />
                                      </div>
                                      <div style="text-align:left;border:0px solid red;" class="col-sm-9 right">
                                        <div class="row" style="border:0px solid red;font-weight:bold;font-size:18px;">
                                          <?php echo $row['typ'];?>
                                        </div>
                                        <div class="row">
                                          Maße: <?php echo number_format($row['length'],0); ?> x <?php echo number_format($row['width'],0); ?> x <?php echo number_format($row['height'],0); ?> (LxBxH)
                                        </div>
                                        <div class="row">
                                          Kälteprüfstrom: <?php echo $row['aen']; ?>A / +POL:<?php if($row['schaltung']='0') echo ' rechts'; elseif($row['schaltung']='1') echo ' links'; else echo 'links UND rechts';?>
                                        </div>
                                        <div class="row" style="margin-top:10px;margin-bottom:10px;font-size:18px;font-weight:bold;">
                                          nur <?php echo number_format($row['price']*1.19,2);?></div>
                                        <div class="row" style="font-weight:bold;margin-bottom:10px;">
                                          komplett geladen & sofort einbaufertig!
                                        </div>
                                        <div class="row" style="margin-bottom:10px;">
                                          Lieferzeit: 1-2 Werktage
                                        </div>
                                      </div>
                                        <div class="col-sm-12">
                                        <div class="row">
                                          <input type="button" value="Kaufen/Details" onclick="location.href='index.php?route=product/product&product_id=<?php echo $row['product_id']; ?>'" class="boxen-button" />
                                        </div>
                                        </div>
                                    </div>
                                    </div>
    PHP-Code:
                              <?php ?>
                            </div>
                      </div>
                      <?php ?>
    HTML-Code:
    </div>
    <div class="col-sm-2 addbox" style="margin-left:15px;">OBD</div>
    <div class="col-sm-2 addbox" style="margin-left:15px;margin-top:15px;">Werkstatt</div>
    <div class="col-sm-2 addbox" style="margin-left:15px;margin-top:15px;">Rückfahr</div>
    </div>
    </div>
    PHP-Code:
      <?php echo $content_bottom?>
    <?php 
    echo $footer?>

  • #2
    Prüfe den von PHP fertig geparsten Quellcode im Browser. CSS ist kein PHP Problem, sondern ein HTML-Client-Browserseitiges, daher hat PHP-Code da nichts verloren.

    [MOD: Verschoben von PHP-Einsteiger]

    Und - bitte beachten:

    Zitat von Threadtitel
    Problem Bootstrap-Struktur - HELP PLS! :
    http://www.php.de/articles/regeln-un...itel-verwenden

    [MOD: Titel geändert]
    The string "()()" is not palindrom but the String "())(" is.

    Debugging: Finde DEINE Fehler selbst! | Gegen Probleme beim E-Mail-Versand | Sicheres Passwort-Hashing | Includes niemals ohne __DIR__
    PHP.de Wissenssammlung | Kein Support per PN

    Kommentar


    • #3
      Hallo

      Grundsätzlich wäre ein Link zu der betroffenen Seite am sinnvollsten. Ich halte es für unwahrscheinlich dass sich jemand aus deinen Quellcodeschnipseln eine Seite zusammenbastelt.

      laut Shoelace muss die Struktur wie folgt aussehen
      Keine Ahnung wer oder was Shoelace ist. Wie eine Bootstrap-Struktur aussehen muss bestimmt aber im Regelfall Bootstrap selbst.

      Mit ist Bootstrap nur als 12-Grid-Raster-System bekannt. Jede Zeile (row) kann demnach in bis zu 12 gleichbreite Spalten unterteilt werden. Die Spalten können wiederum zusammengefasst werden.

      Dein Beispiel besteht jedoch aus aus 24 Spalten (2 + 8 + 2 + 2 + 8 + 2). Ich bezweifele das Bootstrap damit direkt umgehen kann. Eventuell liegt hier das Problem.

      Gruss

      MrMurphy

      Kommentar


      • #4
        Zumindest im Code-Beispiel mit den divs
        HTML-Code:
        <div class="col-sm-4 boxcontainer">
        haben aller divs die Breite ein Drittel. Ergo ergibt sich in einem Raster, das aus 12 Spalten besteht, ein Layout wie im geposteten Bild mit 3 gleich großen Elementen innerhalb einer Zeile.

        Zitat von MrMurphy Beitrag anzeigen
        Dein Beispiel besteht jedoch aus aus 24 Spalten (2 + 8 + 2 + 2 + 8 + 2). Ich bezweifele das Bootstrap damit direkt umgehen kann. Eventuell liegt hier das Problem.
        Wenn man eine row mit Elementen überfrachtet (also mehr als 12/12tel), so passiert nichts weiter, als dass diese optisch in die nächste Zeile rutschen (innerhalb der selben row); Fehler gibt es da keine, außer dass das Layout nicht mehr wie gewollt aussieht, wenn eine Zeile wie gesagt nicht genau auf 12/12tel kommt.

        Eine row ist außerdem auch nichts weiter als ein leeres div, das als Container für eine Zeile dient und links und rechts jeweils negativen margin gibt (-15px).

        Kommentar

        Lädt...
        X