Question

我有一个标题页，其中包含导航栏，徽标和其他导航栏。

在桌面上，第一个导航栏包含右侧的信息，如下所示：

然而，当我换成小屏幕时，它会出现如下：

有没有办法改变它，以便在小屏幕上它不会崩溃？如果需要任何css，也可以更改ID，这样就不会干扰我的其他NavBar及其CSS？

目前我的代码：

<div class="container-fluid">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li>
        <li><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li>
        <li><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li>
    </ul>
</div>

感谢您的帮助！

编辑：

这是我的另一个导航栏，位于我的徽标下方，完美运行：我希望这会有所帮助。

<div class="container">
            <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 collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="#">Collections</a></li>
                        <li><a href="earth_products.php">Jewellry</a></li>
                        <li><a href="#">Offers</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </nav>

        </div>

此导航栏的CSS：

.navbar .navbar-nav {
display: inline-block;
float: none;
color: #000000;
}

.navbar .navbar-collapse {
text-align: center;
}

.navbar-default {
background-color: #44B5DB;
border-color: #000000;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li      > a:focus {
background-color: #FFFFFF;
color: #000000;
}

.navbar-default .navbar-nav > li > a {
color: #000000;
}

我认为展示图片可能更容易。所以基本上我的Navbar＃1需要显示：

注册|登录|结帐

即使是在小型设备上而不是在彼此之上。根据图片，我目前的设置是：Navbar＃1，Logo，Navbar＃2

我希望这是有道理的！

Answer 1

您可以使用upper-navigation类作为基础，向navbar-default div添加一些自定义设置，使其不会崩溃。上部和下部导航栏阵容（他们不必这样做）。

我还调整了你的CSS，所以当你将鼠标悬停在它们上面时，链接的行高就会起作用;现在从底部删除了差距。

＆＃13;

.navbar-default.nav-top {
  background: #fff;
}
.navbar-default.nav-top ul {
  display: inline-block;
  float: right;
}
.navbar-default .navbar-top li {
  float: left;
  font-size: 12px;
}
.navbar.navbar-custom {
  background: #44B5DB;
  border-color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a {
  color: #000000;
}
.navbar.navbar-custom .navbar-nav > li > a:hover,
.navbar.navbar-custom .navbar-nav > li > a:focus {
  background: #FFFFFF;
  color: #000000;
  width: 100%;
}
.navbar.navbar-custom .navbar-nav {
  text-align: center;
}
@media (min-width: 768px) {
  .navbar.navbar-custom .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar.navbar-custom .navbar-nav {
    width: 100%;
    text-align: center;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar-default nav-top">
  <div class="container">
    <ul class="nav navbar-top">
      <li><a href="#"><span class="glyphicon glyphicon-user"> </span> Sign Up</a>

      </li>
      <li><a href="#"><span class = "glyphicon glyphicon-log-in"></span> Login</a>

      </li>
      <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a>

      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <nav class="navbar navbar-default navbar-custom">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-navbar">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a>

        </li>
        <li><a href="#">Collections</a>

        </li>
        <li><a href="earth_products.php">Jewellry</a>

        </li>
        <li><a href="#">Offers</a>

        </li>
      </ul>
    </div>
  </nav>
</div>

＆＃13;

Answer 2

只需确保顶部导航栏中的列表元素将在小屏幕上浮动。您也可能希望将父元素浮动到右侧。

我添加了一些额外的类，因此您不会覆盖默认样式，因为您不希望像我建议的那样影响其他导航栏。

我相信你会明白这个想法。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <ul class="nav navbar-nav navbar-right top-nav-right">
    <li class="top-nav"><a href="register.php"><span class="glyphicon glyphicon-user"> </span> Sign Up</a></li>
    <li class="top-nav"><a href = "login.php"><span class = "glyphicon glyphicon-log-in"></span> Login</a></li>
    <li class="top-nav"><a href="checkout.php"><span class="glyphicon glyphicon-shopping-cart"></span> <?php echo 'Checkout' ?></a> </li>
  </ul>
</div>
<div class="container">
  <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 collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.php">Home</a></li>
        <li><a href="#">Collections</a></li>
        <li><a href="earth_products.php">Jewellry</a></li>
        <li><a href="#">Offers</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>

// 13 = 1101b
int value = 13;

// 11 = 1011b
int result = Convert.ToInt32(new String(
        Convert.ToString(value, 2)
        .Reverse()
        .ToArray()), 2);

Bootstrap Navbar在不应该崩溃时崩溃

2 个答案: