it-swarm.com.de

Hinzufügen eines Suchblocks zu Bootstrap 3 Navbar

Der Suchblock mit Twitter Bootstrap 3-Thema wird nicht inline mit dem Rest der Navigationsleiste angezeigt. Was ist der Trick, um dies inline zu zeigen?

Ich habe versucht, es ohne Erfolg zur page.tpl.php hinzuzufügen.

Irgendwelche Ideen?

BEARBEITEN:::

Ich habe dies der Vorlage hinzugefügt:

 <div class="col-md-3 pull-right">
           <?php if (!empty($page['searchblock'])): ?>
            <?php print render($page['searchblock']); ?>
          <?php endif; ?>
          </div>

Dies scheint jedoch für dieses bootstrap - Thema nicht genau richtig zu sein. Im bootstrap - Code schließt man die Suche folgendermaßen ab:

<form class="navbar-form navbar-right" 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>

Muss ich die Standardsuchblockvorlage ändern? Vielen Dank für jede Hilfe zu meiner Unwissenheit, als ich dieses System lerne. Wirklich graben Drupal 7 jetzt!

3
jasonflaherty

Ich hatte die gleiche Funktionsanfrage. Im mytheme/template.php Ich habe hinzugefügt

/*
 *  Preprocess page.tpl.php to inject the $search_box variable.
 */
function mytheme_preprocess_page(&$variables){
  $search_form = drupal_get_form('search_form');
  $search_box = drupal_render($search_form);
  $variables['search_box'] = $search_box;
}

/*
 *  Form alter to add missing bootstrap classes and role to search form.
 */
function mytheme_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_form') {
    $form['#attributes']['class'][] = 'navbar-form';
    $form['#attributes']['role'][] = 'search';
  }
}

Im mytheme/templates/page.tpl.php Ich habe hinzugefügt

<div class="col-md-3 nav nabvar-nav navbar-right">
  <?php print $search_box; ?>
</div>

Nach dem

<div class="navbar-header"> div.

Es gab immer noch ein Problem mit einem Float: left wurde auf das Menü für sekundäre Links angewendet (anstelle der richtigen Boostrap-Navigationsleiste rechts. Für eine schnelle Problemumgehung in mytheme/css/style.css Ich habe hinzugefügt:

@media(max-width:768px){
  ul.secondary{
    float:none!important;
  }
}
1
miro marchi

Entsprechend Ihrem Tag suchen Sie nach einer D7-Lösung. Die Drupal 7 page.tpl.php hat die Variable $ search_box nicht mehr. Sie können sie jedoch in einer Vorverarbeitungsfunktion in Ihrer template.php hinzufügen:

<?php
/*
 *  Preprocess page.tpl.php to inject the $search_box variable back into D7.
 */
function MYTHEME_preprocess_page(&$variables){
  $search_box = drupal_render(drupal_get_form('search_form'));
  $variables['search_box'] = $search_box;
}

Dann müssen Sie nur noch die Variable in Ihrer page.tpl.php drucken:

<?php print $search_box; ?>

Sie könnten auch module_invoke verwenden, aber Sie sollten keine PHP-Logik in Vorlagendateien haben:

<?php
  $block = module_invoke('search', 'block_view', 'search');
  print render($block); 
?>

Antwort ursprünglich gepostet https://drupal.stackexchange.com/a/10288

0
Chris Godwin

Ich würde etwas in diese Richtung tun:

<form class="navbar-form" role="search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search"/>
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <span class="sr-only">Search</span>
        <span class="glyphicon glyphicon-search"aria-hidden="true"></span>
      </button>
    </div>
  </div>
</form>
0
Lambda

So habe ich es nach dem Kommentar von Chris Godwin in page.tpl.php gemacht:

<?php if (!empty($primary_nav) || !empty($secondary_nav) || !empty($page['navigation'])): ?>
  <div class="navbar-collapse collapse">
    <nav role="navigation">
      <?php if (!empty($primary_nav)): ?>
        <?php print render($primary_nav); ?>
      <?php endif; ?>
        <div class="col-md-3 nav nabvar-nav navbar-right">
            <?php print $search_box; ?>
        </div>
      <?php if (!empty($page['navigation'])): ?>
        <?php print render($page['navigation']); ?>
      <?php endif; ?>
    </nav>
  </div>
<?php endif; ?>
0
Carlos

Laut der Modulseite bootstrap Modul zu diesem Problem ( Suchblock in Navbar seltsames Verhalten ) ist die bisher beste Lösung die folgende CSS-Regel:

#search-block-form .input-group-btn {
  width: auto;
}
0
Olivier