Bootstrap 中的 HTML 内容未正确对齐答案

【问题标题】：HTML content not properly aligned in BootstrapBootstrap 中的 HTML 内容未正确对齐
【发布时间】：2017-04-26 15:22:19
【问题描述】：

这就是问题所在：

我希望它看起来像这样：

我已经包含了 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>

【问题讨论】：

您的 HTML 完全错误。除了<li> 作为<ul> 的孩子之外，您不能拥有其他任何东西。只需按照 BootStrap 网站中使用的代码即可。
您好，感谢您的回答。但是，我尝试过 Bootstrap 中的代码，但我得到的唯一结果是：imgur.com/gallery/JMDDo

标签： javascript html css alignment

【解决方案1】：

好的，我设法弄明白了。我删除了“a”标签，将所有元素放在“ul”中，并为“导航栏”文本设置了一些样式：

<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

【讨论】：