Question

这是问题所在： This is the problem:

我希望它看起来像这样： enter image description here

我已经包含了bootstrap，jQuery和Tether库，并检查了它们的路径和兼容性。

我的代码：

<head>
  <title> My app </title>
  <!-- Required meta tags always come first -->


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
    integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
    crossorigin="anonymous">
  <style type="text/css">


  </style>
</head>

<body>

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"
    integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
    integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
    crossorigin="anonymous"></script>

  <nav class="navbar navbar-light bg-faded">
    <a class="navbar brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
      <a class="nav-link" href="#">Home<span class = "sr-only">(current)</span></a>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline pull-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-success-outline" type="submit"> Search `enter code here`</button>
    </form>
  </nav>
</body>

</html>

Answer 1

好的，我设法搞清楚了。我删除了'a'标签，将所有元素放在'ul'中，并将“Navbar”文本设置为样式：

<nav class = "navbar navbar-light bg-faded">
     <ul class = "nav navbar-nav">
         <li class = "nav-item nav-link" id = "nav_title">
        Navbar
        </li>
         <li class = "nav-item nav-link">
        Home
        </li>
        <li class = "nav-item nav-link">
        Features
        </li>
        <li class = "nav-item nav-link">
        Pricing
        </li>
        <li class = "nav-item nav-link">
        About
        </li>
    </ul>
    <form class = "form-inline pull-xs-right">
        <input class = "form-control" type = "text" placeholder = "Search">
        <button class = "btn btn-success-outline" type = "submit"> Search </button>
    </form>
</nav>

This is how it looks like

HTML内容未在Bootstrap中正确对齐

1 个答案: