Responsive Template mit Bootstrap

B

ByeBye 246039

Hallo,

ich bin gerade dabei ein responsive Template mit Bootstrap zu erstellen. Ich habe einen Header über die gesamte 12 Spalten Breite. In diesem Header befindet sich das Hauptmenü. Darunter habe ich eine 3er Spalte für ein Untermenü, eine 6er Spalte für den Content und noch einmal eine 3er Spalte für zusätzliche Infos.

Nun würde ich gerne die erste Spalte in der Tablets- und Smartphone-Variante verstecken. Da das Untermenü in diesem Fall im Hauptmenü integriert wird. Wenn ich nun diese Spalte mit "visible-md" und "visible-lg" verstecke, bleiben die anderen Spalten trotzdem in der selben Breite, wie wenn die erste Spalte da wäre. Sie sind nur nach links verschoben.

Das Verstecken ist eine CSS-Anweisung "display:none" und das "if($this->countModules('left'))", was den Inhalt von der ersten Spalte abfragt, ist eine PHP-Anweisung.

Ein weiteres Problem: Wenn ich nun die erste Spalte unsichtbar mache, steht diese immer noch im Quelltext drin und CSS-Anweisungen mit "first-child" beziehen sich dann immer noch auf diese erste Spalte.


Zur Veranschaulichung hier mein Code in der index.php:
Code: 
<?php 
// No direct access 
defined('_JEXEC') or die; 
?> 
 
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > 
<head> 

<jdoc:include type="head" /> 
         
<!-- Bootstrap framework integrieren --> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap/bootstrap.min.css" rel="stylesheet"> 
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap/bootstrap-responsive.min.css" rel="stylesheet"> 
<!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 


<!-- meine Template CSS-Dateien --> 
<link rel="stylesheet" media="screen" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" /> 
<link rel="stylesheet" media="screen" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/responsive.css" type="text/css" /> 
<!--[if IE 7]> 
    <link href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template;?>/css/ieonly.css" rel="stylesheet" type="text/css" /> 
<![endif]--> 

<?php  
    if($this->countModules('left') &&  $this->countModules('right')): 
        $breite1 = "3";  
        $breite2 = "6"; 
    elseif($this->countModules('left') || $this->countModules('right')): 
        $breite1 = "3";  
        $breite2 = "9"; 
    else: 
        $breite1 = "";  
        $breite2 = "12"; 
    endif; 
    $template_width = "-fluid"; 
?> 
 
</head> 
<body> 
     
    <!-- Container 1 Header --> 
    <div id="header"> 
        <div class="container"> 
          <div class="row<?php echo $template_width; ?>"> 
            <!--Logo--> 
            <div class="div-logo"> 
                <a href="<?php echo $this->baseurl ?>" title="ADM electronic" target="_self"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/logo.jpg" alt="Logo - ADM electronic" border="0" class="logo" /></a> 
            </div> 
            <!-- Suche --> 
            <div class="suche hidden-xs"><jdoc:include type="modules" name="search" style="none" /></div> 
          </div> 
             
            <!-- ***Topnavigation*** --> 
            <div id="top-nav"> ...  </div> 
        </div> 
    </div> 
     
    <!-- Container 3 Inhalt --> 
    <div class="container"> 
        <div id="content"> 
             
            <div id="main" class="row<?php echo $template_width; ?>"> 
             
            <!-- Left --> 
            <?php if($this->countModules('left')) : ?> 
                <div id="sidebar" class="span<?php echo $breite1; ?> visible-md visible-lg"><jdoc:include type="modules" name="left" style="xhtml" /></div> 
            <?php endif; ?> 
             
            <!-- Component --> 
            <div id="content" class="span<?php echo $breite2; ?>"> 
                <jdoc:include type="component" /> 
            </div> 

         <!-- Right --> 
            <?php if($this->countModules('right')) : ?> 
            <div id="sidebar-2" class="span<?php echo $breite1; ?> hidden-xs"><jdoc:include type="modules" name="right" style="xhtml" /></div> 
            <?php endif; ?> 
 
        </div> 
                <p>&nbsp;</p><p>&nbsp;</p> 
         
        </div> 
    </div> 
</body> 
</html>

Nicht wundern, ich habe hier noch Bootstrap 2. Das ändere ich später noch. Außerdem wird das ein Joomla-Template.

Kann mir jemand helfen? Schön wäre, wenn der Helfende sich gleich mit Bootstrap auskennt.
Für Hilfe wäre ich sehr dankbar.

Gruß, SuLeu
 
Hi,
für dein Problem mit den Spalten gibts die Bootstrap Klassen col-xs und col-sm. Damit gibst du dem Element eine andere Spaltenbreitenzahl für die kleinen Ansichten mit.
Für dein Problem mit first-child gibt es keine CSS-Lösung außer du Arbeitest mit einer eigenen Klasse oder schafst eine andere Abhängigkeit oder löst das mit Javascript.

Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück