html - Bootstrap4 汉堡菜单和链接项对齐

问题描述

我还希望汉堡包图标在我单击它时保持在原位并且不会移动。

<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-nowrap">
  <div class="container">
    <div class="row align-items-center">
      <div class="col col-lg-3">
        <a href="" class="navbar-brand justify-content-start">
            <h1 class="display-3" id="cont">TEST1<span id="se" class="">.SE</span></h1>
        </a>
      </div>
      <div class="col col-lg-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse navbar1">
              <a href="#" class="nav-item nav-link"><!-- Hem -->TEST1</a>
              <a href="#" class="nav-item nav-link"><!-- Recept -->TEST2</a>
              <a href="#" class="nav-item nav-link"><!-- Arbetssökande -->TEST3</a>
              <a href="#" class="nav-item nav-link"><!-- Omdömen -->TEST4</a>
              <a href="#" class="nav-item nav-link"><!-- Hjälpmedel -->TEST5</a>
            </div>
        </div>
      </div>
      <div class="col col-lg-1"></div>
            <div class="col col-lg-3">
        <div class="navbar-nav collapse navbar-collapse navbar1">
          <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
            <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Registrera</a>
        </div>
      </div>
    </div>
    <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button>
  </div>
</nav>

标签： htmlcssbootstrap-4

将此 CSS 添加到您的代码中：

.navbar-toggler { 
  position: absolute;
  right: 10px;
  top: 10px;
}

而不是jsfiddle ，您可以在stackoverflow中创建工作片段，就像下面的片段一样：

body {
  background: #e6ffe6;
  color: gray;
  font-family: Nunito;
}

.navbar-brand h1 {
  font-weight: 100;
  font-size: 2rem;
  margin: 0, 24px;
}

#se {
  color: gray;
}

#cont {
  margin-bottom: 0px;
}

.navbar-toggler {
  position: absolute;
  right: 10px;
  top: 12px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/38a8bb4287.js" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark bg-dark navbar-expand-lg text-nowrap">
  <div class="container">
    <div class="row align-items-center">

      <!-- TITLE -->

      <div class="col col-lg-3">
        <a href="" class="navbar-brand justify-content-start">
          <h1 class="display-3" id="cont">TEST1<span id="se" class="">.SE</span></h1>
        </a>
      </div>
      <!-- NAVIGATION-->

      <div class="col col-lg-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse navbar1">
            <a href="#" class="nav-item nav-link">
              <!-- Hem -->TEST1</a>
            <a href="#" class="nav-item nav-link">
              <!-- Recept -->TEST2</a>
            <a href="#" class="nav-item nav-link">
              <!-- Arbetssökande -->TEST3</a>
            <a href="#" class="nav-item nav-link">
              <!-- Omdömen -->TEST4</a>
            <a href="#" class="nav-item nav-link">
              <!-- Hjälpmedel -->TEST5</a>
          </div>
        </div>
      </div>

      <!-- SPACER -->

      <div class="col col-lg-1"></div>

      <!-- LOGIN -->


      <div class="col col-lg-3">
        <div class="navbar-nav collapse navbar-collapse navbar1">
          <a href="#" class="nav-item nav-link mx-1" id="login"><i class="fas fa-user-check mr-1"></i>Logga In</a>
          <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Registrera</a>

        </div>

      </div>
    </div>


    <!-- DROPDOWN -->
    <button class="navbar-toggler" data-toggle="collapse" data-target=".navbar1"><span class="navbar-toggler-icon"></span></button>
  </div>



</nav>

<!-- CONTENT -->

<div class="container bg-light text-dark text-center pt-5">
  <h1 class="display-1 p-3">Lorem ipsum dolor sit amet.</h1>
  <p class="display-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi esse incidunt hic odio eveniet eos, consequuntur vel aperiam commodi placeat nemo eum dicta maiores quas vero odit error enim deleniti voluptatum pariatur necessitatibus, ipsam sequi, sunt
    excepturi. Similique, culpa, expedita omnis dolores aspernatur molestias consequatur saepe veritatis ea reprehenderit velit nulla inventore quam alias provident voluptatem repellendus, soluta vel ad tempora nihil atque magni a? Quibusdam, quo adipisci
    accusamus numquam error vitae animi sequi deserunt maxime aspernatur eaque mollitia ex praesentium nostrum atque dignissimos ea, asperiores laborum illo consequuntur. Provident molestias mollitia quis hic inventore. Pariatur, dolore tempore excepturi?
    Voluptatem! ipsum dolor sit amet, consectetur adipisicing elit. Ex, labore at ullam. Eaque nesciunt labore excepturi eum error, ratione, deleniti voluptatibus ex aspernatur nisi nobis magni saepe adipisci, fugit eius optio voluptatem vel itaque illum
    omnis molestias! Beatae consectetur, nulla?</p>

</div>





<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

html - Bootstrap4 汉堡菜单和链接项对齐

问题描述

解决方案

推荐阅读