javascript - 为什么我的导航栏文本不在同一行？

Question

为什么“前端 Web 开发人员”的导航栏文本和我的页面文本不在同一行。我怎样才能让它出现在同一行？ 正如您在屏幕截图中看到的，它目前看起来像这样 https://ibb.co/jkd0LS .我希望文本都在同一行上。

jQuery(document).ready(function($) {
  $(document).on("scroll", function() {
    const features_top = $(".features-icons").position().top;
    const top_of_window = $(window).scrollTop();

    if (top_of_window >= features_top) {
      $(".navbar").show();
    } else {
      $(".navbar").hide();
    }
  });
});

.navbar {
  border-bottom: 0.04rem solid #111;
  background-color: ;
  display: none;
}

nav ul li a {
  color: rgb(65, 47, 47);
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
}

nav ul li a:hover {
  text-decoration: underline;
  color: #000;
}

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Front End Web Developer</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#features-icons">Expectations</a>
      </li>
      <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

这是我所有的网站代码，我上传到GitHub

Answer 1

您的 #navbar7 上的 display: flex !important; 使其全宽显示。您可以将其更改为 display: inline-flex; 但将其更改为 float: right; 可能更容易。

#navbar7 {
    float: right;
}

参见 this fiddle例如(在比 SO 代码示例更宽的视口(viewport)中)。

jQuery(document).ready(function($) {
  $(document).on("scroll", function() {
    const features_top = $(".features-icons").position().top;
    const top_of_window = $(window).scrollTop();

    if (top_of_window >= features_top) {
      $(".navbar").show();
    } else {
      $(".navbar").hide();
    }
  });
});

body { height: 200vh; }
#navbar7 {
    float: right;
}

.navbar {
  border-bottom: 0.04rem solid #111;
  background-color: ;
  display: none;
}

nav ul li a {
  color: rgb(65, 47, 47);
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
}

nav ul li a:hover {
  text-decoration: underline;
  color: #000;
}

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Front End Web Developer</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#features-icons">Expectations</a>
      </li>
      <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<section class="features-icons bg-light" id="features-icons">
<div class="container">
  <h2 class="mb-5 text-center">What You Can Expect</h2>
  <hr class="black">
  <div class="row">
    <div class="col-lg-4">
      <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
        <div class="features-icons-icon d-flex">
          <i class="far fa-lightbulb m-auto text-primary"></i>
        </div>
        <h3 class="text-center">Ideas</h3>
        <p class="lead mb-0 text-justify">I collaborate with clients and peers to nurture and transform ideas into well thought out design specs. After all, that's where the majority of amazing user experiences start.</p>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
        <div class="features-icons-icon d-flex">
          <i class="fa fa-magic m-auto text-primary"></i>
        </div>
        <h3 class="text-center">UX/UI</h3>
        <p class="lead mb-0 text-justify">I sketch and wireframe interfaces focusing on content structure, intuitive UI patterns and simple interactions. I'm a minimalist who truly believes that less is more.</p>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="features-icons-item mx-auto mb-0 mb-lg-3">
        <div class="features-icons-icon d-flex">
          <i class="fas fa-code m-auto text-primary"></i>
        </div>
        <h3 class="text-center">Coding</h3>
        <p class="lead mb-0 text-justify">I design in the browser with HTML(5), CSS(3) and a touch of JavaScript. I love coding things from scratch, but I can work with front-end frameworks like Bootstrap too.</p>
      </div>
    </div>
  </div>
</div>
  </section>