Question

我到处寻找这个答案，似乎找不到有用的东西。我在导航栏中使用bootstrap，当窗口很小时导航栏会折叠。当折叠然后通过按钮打开时，导航链接居中，并且它们各自的下拉菜单对齐到页面的左侧，因此它不能很好地运行。我需要将所有链接对齐到左侧 - 但仅在此视图中（我在窗口折叠之前使用nav-justified进行对齐）。如何在不放大视图的情况下搞乱导航栏的情况下如何做到这一点？理想情况下，我想通过使用html＆amp; amp;仅限css。

以下是jsfiddle

html：

Comstar，inc。内部仓库

 </head> <body>   <div class="container" id="page-container">

  <div class="header">            <div class="container">
          <a href="http://www.comstarinc.com/"><img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg"></a>
      </div> <!-- /.container -->         </div> <!-- /.header -->

<div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav nav-justified custom">
      <li><a href="../index.html"><span class="glyphicon glyphicon-home"></span></a></li>
      <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">FedEx</a></li>
              <li><a href="#">UPS</a></li>
              </ul> <!-- /.dropdown-menu -->
      </li> <!--/.dropdown -->
      <li><a href="#">Testing</a></li>
      <li><a href="#">Packing</a></li>
      <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li><a href="#">Part Number</a></li>
              <li><a href="#">Ebay Number</a></li>
              </ul> <!-- /.dropdown-menu -->
      </li> <!-- /.dropdown -->
      <li><a href="#">Cleaning</a></li>
      <li><a href="#">Recieving</a></li>
      <li><a href="#">Location</a></li>
      </ul> <!-- /.nav .navbar-nav .custom -->


</div> <!-- /.collapse .navbar-collapse #myNavbar -->   </div> <!-- /.container-fluid #navbar-container --> </nav> <!-- /.navbar --> 



  <div class="jumbotron">             <div class="container">

          <h1 class="text-center">Comstar, inc. Warehouse</h1>

          <div class="container" id="jumbo-content">

          </div> <!-- .container #jumbo-content -->

      </div> <!-- /.container -->         </div> <!-- /.jumbotron -->

我还不能在这里发布我的CSS，但它可以在jsfiddle中看到。

Answer 1

要左移对齐移动视口上的链接和下拉列表，请将其添加到CSS中。

@media (max-width: 767px) {
    .navbar .nav.custom > li > a:hover, .navbar .nav.custom > li > a {
        display: inline-block;
    }
}

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  margin: 0px;
  padding: 0px;
  width: 100%;
}
#page-container {
  width: 100%;
}
/*Header*/

.header {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 54px;
}
.header img {
  margin: 15px 0px 0px 57px;
  padding: 0px;
  height: 22px;
  width: auto;
  float: left;
}
.navbar {
  margin: 0px;
  padding: 0px;
  background-image: url("https://www.comstarinc.com/media/catalog/product/n/a/nav-bar-background.png");
}
#navbar-container {
  margin: 0px;
  padding: 0px;
}
.navbar .nav {
  margin-top: 5px;
}
/* Link Text Color */

.navbar .nav li a {
  color: #ffffff;
  text-transform: uppercase;
  font-family: 'Avenir LT W01 65 Medium';
  font-weight: normal;
  font-size: 13px;
}
.navbar .nav li a:hover {
  font-weight: bolder;
}
/* !Collapse button colors */

.navbar button {
  color: white;
  border: 1px solid white;
}
/* !Navbar background colors */

.navbar .custom > li > a:hover,
.navbar .custom > li > a {
  background-color: transparent !important;
}
/* Changes Nav- collapse button color */

.navbar .navbar-toggle .icon-bar {
  background-color: white;
}
/* Dropdown menu anchor background color */

.navbar .nav-justified > li > .dropdown-menu {
  background-color: #eaeaed;
}
/* dropdown menu background and text color */

.navbar .nav-justified > li > .dropdown-menu a:hover {
  background-color: #eaeaed;
  color: #002c66;
}
.navbar .nav-justified > li > .dropdown-menu a {
  color: #002c66;
}
/* Navbar Hover */

.sidebar-nav {
  padding: 9px 0;
}
.navbar .dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
.navbar .dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.navbar .dropdown:hover .dropdown-menu {
  display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}
.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}
/*Jumbotron*/

.jumbotron {
  margin: -25px 0px 0px 0px;
  padding: 0px;
  background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 725px;
  border: none;
}
.jumbotron h1 {
  color: #ffffff;
  text-align: center;
  font-family: Arial;
  margin-top: 85px;
  font-size: 60px;
}
@media (max-width: 767px) {
  .navbar .nav.custom > li > a:hover,
  .navbar .nav.custom > li > a {
    display: inline-block;
  }
}

<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>
<div class="container" id="page-container">
  <div class="header">
    <div class="container">
      <a href="http://www.comstarinc.com/">
        <img class="logo" src="https://www.comstarinc.com/media/catalog/product/u/n/untitled-1.jpg">
      </a>

    </div>
    <!-- /.container -->
  </div>
  <!-- /.header -->
  <nav class="navbar">
    <div class="container-fluid" id="navbar-container">
      <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>
      </div>
      <!-- /.navbar-header -->
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav nav-justified custom">
          <li><a href="../index.html"><span class="glyphicon glyphicon-home"></span></a>

          </li>
          <li class="dropdown">	<a class="dropdown-toggle" data-toggle="dropdown" href="#">Shipping<span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">FedEx</a>

              </li>
              <li><a href="#">UPS</a>

              </li>
            </ul>
            <!-- /.dropdown-menu -->
          </li>
          <!--/.dropdown -->
          <li><a href="#">Testing</a>

          </li>
          <li><a href="#">Packing</a>

          </li>
          <li class="dropdown">	<a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>

            <ul class="dropdown-menu">
              <li><a href="#">Part Number</a>

              </li>
              <li><a href="#">Ebay Number</a>

              </li>
            </ul>
            <!-- /.dropdown-menu -->
          </li>
          <!-- /.dropdown -->
          <li><a href="#">Cleaning</a>

          </li>
          <li><a href="#">Recieving</a>

          </li>
          <li><a href="#">Location</a>

          </li>
        </ul>
        <!-- /.nav .navbar-nav .custom -->
      </div>
      <!-- /.collapse .navbar-collapse #myNavbar -->
    </div>
    <!-- /.container-fluid #navbar-container -->
  </nav>
  <!-- /.navbar -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="text-center">Comstar, inc. Warehouse</h1>

      <div class="container" id="jumbo-content"></div>
      <!-- .container #jumbo-content -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.jumbotron -->
</div>
<!-- /.container #page-container -->

使用引导程序折叠导航菜单后如何对齐导航链接

1 个答案: