bootstrap - 汉堡包导航不垂直堆叠

时间：2016-11-29 04:26:38

标签： html css twitter-bootstrap navigation hamburger-menu

所以我做了一个简单的响应式导航。问题是，对于手机，汉堡包菜单列表项不会垂直堆叠。此外，对于常规桌面，单击“注册”下拉列表会出于某种奇怪的原因向下移动。几个小时后我就被困在了它上面。真的很感激任何帮助......

＆＃13;
＆＃13; 
input::-webkit-input-placeholder {
  color: #2B74A8;
}

input::-moz-placeholder {
  color: #2B74A8;
}

input:-ms-input-placeholder {
  color: #2B74A8;
}
* {
  max-width: 1280px;
}

.navbar {
  overflow: visible;
  margin-bottom: 20px;
  background-color: transparent;
  border: none;
}

ul.nav.navbar-nav {
  background-color: #3FAFFF;
  word-spacing: 40px;
  margin-top: 170px;
  height: 70px;
  box-shadow: 0 4px #2B74A8;
  width: 100%;
  margin-right: 0;
  color: #FFFFFF;
}

ul.nav.navbar-right {
  margin: 0;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: transparent;
  color: #FDFDFD;
  text-decoration: none;
}

.navbar .nav > li > a {
  float: none;
  text-decoration: none;
  text-shadow: none;
  color: #FDFDFD;
  font-size: 20px;
  font-family: "SourceSansPro-Light";
  top: 12.5px;
  word-spacing: 40px;
  text-transform: none;
}

li {
  list-style: none;
}

.required {
  font-size: 16px;
  font-family: "SourceSansPro-Light";
  color: #3FAFFF;
  word-spacing: 10px;
}

body .inputArea {
  width: 267px;
  height: 44px;
  word-spacing: 10px;
  background-color: #2B74A8;
  font-size: 16px;
  font-family: "SourceSansPro-Light";
}

.submit {
  width: 130px;
  height: 44px;
  font-size: 16px;
  font-family: "SourceSansPro-Light";
  color: #FFFFFF;
  background-color: #3FAFFF;
  background-image: none;
  border: none;
  text-shadow: none;
}


/*Media Queries*/

select.nav-select.form-control {
  display: none;
}

nav.navbar.navbar-default {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

.registerForm {
  cursor: pointer;
  word-spacing: 0;
}

.navbar {
  background-color: #3FAFFF;
  border-color: #FFFFFF;
  box-shadow: none;
}

.navbar a {
  font-size: 1.3em;
  transition: all 0.5s ease;
  background: transparent;
}

.navbar-default .navbar-nav > li > a {
  text-shadow: none;
}

.nav > li {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}

@media only screen and (max-width: 767px) {
  #bs-example-navbar-collapse-1 {
    position: absolute;
    width: 100%;
    height: auto;
    background: #5E6E8F;
    text-align: center;
  }
  ul.nav.navbar-nav {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
    text-align: center;
  }
  .navbar-toggle {
    display: block;
    margin-top: 2em;
  }
  .center {
    text-align: center;
  }
  .navbar-default .navbar-toggle,
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:active,
  .navbar-default .navbar-toggle:visited {
    border: none;
    background-color: transparent;
  }
}

.form-inline .form-group {
  margin-left: 0;
  margin-right: 0;
}

.inputForm {
  word-spacing: 10px;
  height: 65px;
  vertical-align: middle;
  text-align: center;
  position: relative;
  top: 1em;
}

.form-control::-webkit-input-placeholder {
  color: #3FAFFF;
}

.form-control:-moz-placeholder {
  color: #3FAFFF;
}

.form-control::-moz-placeholder {
  color: #3FAFFF;
}

.form-control:-ms-input-placeholder {
  color: #3FAFFF;
}

body input {
  border-color: transparent !important;
  border: none;
}

.glyphicon {
  top: 1.25em;
  right: 4.5em;
}
＆＃13; 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div>
  <select class="nav-select form-control">
    <option class="" value="/fundamentals">- Fundamentals</option>
    <option class="" value="/html">- HTML</option>
    <option class="" value="/stylesheets">- Stylesheets</option>
    <option class="" value="/javascript">- JavaScript</option>
    <option class="" value="/php">- PHP</option>
    <option class="" value="/tutorials">- Tutorials</option>
    <option class="" value="/register">- Register</option>
  </select>

  <nav class="navbar navbar-default" role="navigation">

    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" style="height: 1px;">
        <ul class="nav navbar-nav">
          <li><a href="/fundamentals/" target="_self">Fundamentals</a></li>
          <li><a href="/html/" target="_self">HTML</a></li>
          <li><a href="/stylesheets/" target="_self">Stylesheets</a></li>
          <li><a href="/javaScript/" target="_self">JavaScript</a></li>
          <li><a href="/php/" target="_self">PHP</a></li>
          <li><a href="/tutorials/" target="_self">Tutorials</a></li>

          <ul class="nav navbar-right">
            <li class="dropdown">
              <a href="#demo" data-toggle="collapse" class="registerForm">Register
                <span class="glyphicon glyphicon-chevron-down"></span>
              </a>
              <div class="collapse" id="demo" style="background-color: #2B74A8;">
                <div class="form-group inputForm">
                  <div class="col-xs-12">
                    <form class="form-inline">
                      <label class="required">* required </label>
                      <div class="form-group">
                        <input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
                      </div>
                      <div class="form-group">
                        <input type="email" class="form-control inputArea" id="email" placeholder="Email *">
                      </div>
                      <div class="form-group">
                        <input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
                      </div>
                      <button type="submit" class="btn btn-default submit">Submit</button>
                    </form>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</div>
＆＃13;
＆＃13;
＆＃13;

以下是link

2 个答案:

答案 0 :(得分：0)

你可以使用flex来做到这一点，这有点棘手但你可以在这里找到它all about flex

这些是我为你制作的css代码

.myOwnHeader{
  position:relative;
  background:red;
  height:50px;
  display:flex;
  justify-content:flex-end;

  align-items:center; 
}

.myOwnBurger{
  padding:0;
  margin:0;
  width:25px;
  height:25px;
  margin-right:25px;
}

将这些css应用于theese潜水

<div class="navbar-header myOwnHeader">
        <button type="button" class="navbar-toggle collapsed myOwnBurger" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
祝你好运。

答案 1 :(得分：0)

在移动设备上看起来li的宽度未设置为100％。

考虑给定的标记和现有的样式。

我想出了这个 - https://jsfiddle.net/vncnttejas/fenta9wo/8/ 

@media only screen and (max-width: 767px) {
  #bs-example-navbar-collapse-1 {
    position: absolute;
    width: 100%;
    height: auto;
    background: #5E6E8F;
    text-align: center;
  }
  ul.nav.navbar-nav {
    display: block;
    width: 100%;
    float: none;
    margin: 0;
    text-align: center;
  }
  ul.nav.navbar-nav > li {
    width: 100%;
    background-color: #3FAFFF;
    height: inherit;
    border-top: 1px dotted white;
  }
  #demo.collapse.in {
    margin-top: 20px !important;
  }
  .nav.navbar-right {
    width: 100%;
  }
  .nav.navbar-right > li.dropdown {
    width: 100%;
  }
  .navbar-toggle {
    display: block;
    margin-top: 2em;
  }
  .center {
    text-align: center;
  }
  .navbar-default .navbar-toggle,
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:active,
  .navbar-default .navbar-toggle:visited {
    border: none;
    background-color: transparent;
  }
}
相关问题
最新问题