Question

浏览器未缩小时菜单正常

缩小时，菜单无法正确显示

以下是现场演示：http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

以下是我使用的样式：

#!/usr/bin/env perl
use strict;
use warnings;
use Text::CSV;

my %student_hash = (
    'RollNummber1' => {
        'studentname' => 'Boris',
        'address'     => [ 'Vietnam', 'local' ],
        'DOB'         => '5june2000'

    },
    'RollNummber2' => {
        'studentname' => 'John',
        'address' => [ '4th/floor', 'Culverdown/Street', 'WestHam', 'UK.', ],
        'DOB'     => '2feb2000'

    },
    'RollNummber3' => {
        'studentname' => 'Karen',
        'DOB'         => '5march2000'

    }
);

my $csv = Text::CSV->new( { sep_char => ',', eol => "\n" } );
$csv->column_names( 'studentname', 'DOB', 'address' );
foreach my $student ( values %student_hash ) {
    if ( defined $student -> {address} ) { 
        $student -> {address} = join (" ", @{$student->{address}});
    }

    $csv->print_hr( \*STDOUT, $student );
}

我使用上面的最后四个导航栏样式来折叠disable the navbar，我也删除了汉堡菜单。

这是使用上述样式和下拉菜单的html：

    @media (max-width: 767px) {
        .navbar .navbar-form {
            width: 200px;
            padding-left: 0;
            padding-right: 0;
        }
    }      
    @media (min-width: 768px) {
        .navbar .navbar-form {
            width: 400px;
        }
    }      
    .navbar .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }              
    .navbar-collapse.collapse {
        display: block !important;
    }      
    .navbar-nav > li, .navbar-nav {
        float: left !important;
    }      
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px !important;
    }      
    .navbar-right {
        float: right !important;
    }

当缩小浏览器时，菜单无法正确呈现的原因是什么？

以下是现场演示：http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

Answer 1

如果您不想要导航中的任何移动功能，则必须删除与导航本身相关联的大多数类（或覆盖其他规则）。由于768px类，您的下拉列表仍然会在navbar-nav下崩溃。

*我相信你还使用了UI-Bootstrap Dropdown Button而不是navbar dopdown类，所以如果你必须使用按钮，你很可能必须用它来补偿它额外的CSS。

＆＃13;

.navbar.navbar-custom {
  padding-top: 5px;
  height: 50px;
}
.navbar.navbar-custom .navbar-navbar {
  display: inline;
}
.navbar.navbar-custom .nav > li > a,
.navbar.navbar-custom .nav > li > a:hover,
.navbar.navbar-custom .nav > li > a:focus {
  color: white;
  background: none;
  text-decoration: none;
}
.navbar.navbar-custom .nav-right li.dropdown .dropdown-menu {
  margin-top: 5px;
  right: 0;
  left: auto;
}
.navbar.navbar-custom .nav.nav-left {
  float: left;
}
.navbar.navbar-custom .nav.nav-right {
  float: right;
}
.navbar.navbar-custom .nav.nav-right > li,
.navbar.navbar-custom .nav.nav-left > li {
  display: inline-block;
}
.navbar.navbar-custom .nav-form {
  width: 300px;
  padding: 3px 15px;
  float: left;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-navbar .nav .no-link {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-custom .navbar-navbar .nav .glyphicon:nth-last-child(2) {
    display: none;
  }
}
@media (max-width: 480px) {
  .navbar.navbar-custom .nav-form {
    width: 53%;
  }
}
@media (max-width: 320px) {
  .navbar.navbar-custom .nav-form {
    display: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
  <div class="container">
    <div class="navbar-navbar">
      <ul class="nav nav-left">
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="no-link">My shop</span></a>

        </li>
      </ul>
      <form class="nav-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

        </div>
      </form>
      <ul class="nav nav-right">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> <span class="no-link">My home</span></a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span> </a>

          <ul class="dropdown-menu">
            <li><a href="#"> Log in</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

Answer 2

固有的利润正在重新发挥作用。在bootstrap的默认CSS中，有一段代码表示：

setNumber()

基本上，当您的屏幕低于768像素时，导航栏上有一个上下边距。您可以通过重新定义@media (min-width: 768px) { .navbar-nav { margin: 7.5px -15px; } }元素的边距来解决它。

当我将此代码添加到您的内联样式时，它会修改边距。你可以玩这个，并完全按照自己的喜好。

.navbar-nav

使用它 on this plunkr 。

干杯

缩小浏览器时，Bootstrap菜单显示不正确

2 个答案: