Question

我的bootstrap导航栏出了问题。我想划分类别在左边的内容，登录详细信息在左边。

例如： Brädspel Samlarkortspel Figurspel Tillbehör列表保留在左侧，同时： Registrera Logga in Önskelista（0） Kundvagn 卡桑留在右边。我尝试过使用<ul class="nav navbar-nav navbar-right">然而它正常工作。以下是整个网站导航栏：http://www.bradspelskafeet.se/index.php

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a href="index.php"><img src="image/samspel.png" alt="mainlogo" class="img-responsive center-block" height="200px" width="200px"></a>
<br>
<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">

    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php
           	if (isset($_GET['path'])) {
              $parts = explode('_', (string)$_GET['path']);
            } else {
              $parts = array();
            }

            if (isset($parts[0])) {
              $category_id = $parts[0];
            }
        ?>
        <?php foreach ($categories as $category) { ?>
        <?php if (isset($category_id) && isset($category['category_id']) && $category['category_id'] == $category_id) { ?>
        <li name="<?php echo $category['name']; ?>" class="open"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } else { ?>
        <li name="<?php echo $category['name']; ?>"><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
          <?php echo $currency; ?>
          <?php echo $language; ?>
                  <?php if ($logged) { ?>

                  <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
                  <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>

                  <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
                  <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
                  <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
                  <?php } else { ?>
                  <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
                  <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
                  <?php } ?>
              <li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
              <li><a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_shopping_cart; ?></span></a></li>
              <li><a href="<?php echo $checkout; ?>" title="<?php echo $text_checkout; ?>"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_checkout; ?></span></a></li>
      </ul>
    </div>
  </div>
  </nav>
</div>
<?php } ?>

Answer 1

制作这样的结构，你已经完成了

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
          <li><a href="#">Brädspel</a></li>
       <li><a href="#">Samlarkortspel</a></li>
       <li><a href="#">Figurspel</a></li>
        <li><a href="#">Tillbehör</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
    <li class=""><a href="#">Registrera</a></li>
        <li class=""><a href="#">Logga in</a></li>
          <li class=""><a href="#">  Önskelista (0)</a></li>
        <li class=""><a href="#">Kundvagn</a></li>
          <li class=""><a href="#">Kassan</a></li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Boostrap导航栏内容对不对？

1 个答案: