opgelost Bootstrap 3 in Joomla: Vertikaal menu ipv. horizontaal

Bootstrap 3 in Joomla: Vertikaal menu ipv. horizontaal

15 okt 2013 18:15

Hoi,

Ik krijg steeds een vertikaal menu als ik deze regel code gebruik in index.php van template:

Code:

<jdoc:include type="modules" name="position-9" style="none" />

Volgens mij had iemand anders hetzelfde probleem met deze code:

Code:

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
    <a class="navbar-brand" href="<?php echo $this->baseurl; ?>/"><?php echo $app->getCfg('sitename'); ?></a>
  </div>

  <div class="navbar-collapse collapse">
    <jdoc:include type="modules" name="position-1" style="none" />
    <ul class="nav navbar-nav">
    </ul>
  </div><!--/.nav-collapse -->
</nav>

Ik doe iets soortgelijks.

Als ik de jdoc statement weghaal in mijn code dan heb ik weer standaardcode van Bootstrap. Ik heb dan weer een horizontaal menu.

Het bovenstaande probleem schijnt op te lossen door een float:left toe te voegen (ergens). Geen idee waar.

---

Hier mijn eigen code nu (het is voornamelijk gekopieerde code van Bootstrap met een kleine aanpassing: jdoc: include erin verwerkt.

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
      
     <jdoc:include type="modules" name="position-9" style="none" />
          
  <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>


  
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>