如何在移动设备的正确位置保留第二个导航栏？

时间：2018-02-14 16:27:57

标签： html css twitter-bootstrap bootstrap-4

我正在使用Bootstrap 4进行​​一个项目，其中我需要两个导航栏，左侧应该在小型设备中崩溃，但第二个不应该是。

我设法做到了，但是当我打开汉堡菜单时，右边的导航栏会移到左边的顶部而不是固定在它的位置。

有谁知道如何解决这个问题？

以下是我的代码的链接：https://jsfiddle.net/csantanna/2xb55q5v/3/#&togetherjs=C48LvOlaNQ

汉堡包菜单没有在那里打开，但在我的文件中却是。 This is how it appears when the menu its opened问题是菜单下方的图标。

And this is the menu closed.请注意，图标未折叠。

＆＃13;
＆＃13; 
.navbar {
  background-color: #e0d9d5;
  font-family: 'barlow', sans-serif;
  font-weight: 200;
}

a.nav-item {
  color: #1e1e1e;
}

a.nav-item:hover {
  color: rgba(237, 106, 145, 0.5);
}

a.nav-item.nav-link {
  position: relative;
  z-index: 1;
}

.nav-btn {
  background: none;
  color: #1e1e1e;
}

.nav-btn:hover {
  color: rgba(237, 106, 145, 0.5);
}

.nav-btn i {
  font-size: 1.5em;
}

.animated-icon1 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.animated-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.animated-icon1 span {
  background: #1e1e1e;
}

.animated-icon1 span:nth-child(1) {
  top: 0px;
}

.animated-icon1 span:nth-child(2) {
  top: 10px;
}

.animated-icon1 span:nth-child(3) {
  top: 20px;
}

.animated-icon1.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.animated-icon1.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.wrap {
  display: inline-block;
  position: relative;
  float: right;
  padding: 0;
}

input[type="text"] {
  height: 60px;
  font-size: 1.5em;
  display: inline-block;
  font-weight: 100;
  border: none;
  outline: none;
  color: #1e1e1e;
  padding: 3px;
  padding-right: 50px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
  width: 300px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}

button[type="submit"] {
  font-size: 1.5em;
  background: none;
  display: inline-block;
  color: #1e1e1e;
  float: right;
  border: none;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  transition: opacity .4s ease;
}

button[type="submit"]:hover {
  opacity: 0.8;
}

button,
input[type="button"],
input[type="submit"] {
  border: none;
  border-radius: 0;
  font-size: 1rem;
  line-height: 1;
  font-weight: 300;
  padding: 10px;
}

textarea {
  box-sizing: content-box;
  width: 100%;
}
＆＃13; 
<!doctype html>
<html lang="pt">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Barlow:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
  </head>

  <body>
    <header>


      <!--Navbar-->
      <nav class="navbar navbar-expand-lg">
        <div class="container">
          <!-- Collapse button -->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="animated-icon1"><span></span><span></span><span></span></div>
          </button>

          <!-- Collapsible content -->
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Links -->
            <div class="navbar-nav mr-auto">

              <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link " href="#">Produtos <span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link " href="#"> Blog<span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link " href="#">Contato <span class="sr-only">(current)</span></a>
            </div>
          </div>
          <!-- Collapsible content -->
          <div class="d-flex flex-row order-2 order-lg-3">
            <form class="form-inline my-2 my-lg-0" action="" autocomplete="on">
              <div class="wrap">
                <input id="search" name="search" type="text" placeholder="What're we looking for ?">
                <button id="search_submit" value="Rechercher" type="submit"><i class="fas fa-search"></i></button>
              </div>
              <button class="nav-btn"><i class="fas fa-shopping-cart"></i></button>
              <button class="nav-btn"><i class="fas fa-user"></i></button>
            </form>
          </div>
        </div>
      </nav>
      <!--/.Navbar-->
    </header>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

要使其正常工作，您需要将表单移出周围的div（因为不需要）并在导航栏切换器之后立即将其放入（在HTML中）。注意：为简单起见，我将自定义切换器替换为标准切换器。

然后将类order-lg-last ml-auto应用于表单。

order-lg-last会为lg或更大的屏幕重新排序表单（即将其作为最后一项），ml-auto表示＆＃34; margin-left：auto＆ ＃34;这将把表格推向右边。

在较小的屏幕上，表格将在切换按钮后立即出现，从而产生所需的效果。

点击＆＃34;运行代码段＆＃34;按钮下方并展开到整页：

＆＃13;
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <!-- Collapse button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<!--                <div class="animated-icon1"><span></span><span></span><span></span></div>-->
            <span class="navbar-toggler-icon"></span>
        </button>

        <form class="form-inline order-lg-last ml-auto my-2 my-lg-0" action="" autocomplete="on">
            <div class="wrap">
                <input id="search" name="search" type="text" placeholder="What're we looking for ?">
                <button id="search_submit" value="Rechercher" type="submit"><i class="fas fa-search"></i></button>
            </div>
            <button class="nav-btn"><i class="fas fa-shopping-cart"></i></button>
            <button class="nav-btn"><i class="fas fa-user"></i></button>
        </form>

        <!-- Collapsible content -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <!-- Links -->
            <div class="navbar-nav">

                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link " href="#">Produtos <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link " href="#"> Blog<span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link " href="#">Contato <span class="sr-only">(current)</span></a>
            </div>
        </div>
        <!-- Collapsible content -->
    </div>
</nav>
<!--/.Navbar-->
＆＃13;
＆＃13;
＆＃13;

此外，mr-auto课程可以从您的代码中移除，因为它不会在此处执行任何操作。

相关问题
最新问题