Bootstrap导航栏左侧出现小方框问题求助

嘿，刚上手Bootstrap和HTML遇到这种小问题太正常了，我帮你捋捋问题出在哪~

问题根源分析 #

看了你的代码，有两个明显的问题导致了这个小方框：

1. 属性名书写错误：你给navbar切换按钮写的data- target属性中间多了个空格！正确的写法是data-target，空格会让浏览器把它识别成两个无效属性，Bootstrap没法正确绑定折叠事件，就会出现异常元素。
2. Navbar结构不完整：你的代码里只写了navbar-header部分，缺少了折叠导航菜单的容器，这会导致布局结构混乱，进而出现奇怪的视觉问题。

修正后的完整代码 #

下面是调整后的代码，我标注了修改的地方：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>VENDER</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <style>
    body {
      background-color: white;
    }
  </style>

  <div class="top-container-fluid">
    <div class="row">
      <p class="headertext"><b> TEXT HERE! </b></p>
    </div>
  </div>

  <div class="navbar navbar-inverse navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <a href="/" class="navbar-brand">Brand Name Site</a>
        <!-- 修正：去掉data-target中间的空格 -->
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- 新增：折叠导航菜单容器，和data-target的类名对应 -->
      <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

额外注意事项 #

• 如果你去掉自定义的style.css后问题消失，那可能是你的自定义样式里有冲突的规则，比如给全局元素加了奇怪的边框或padding
• Bootstrap的组件对结构要求很严格，一定要按照官方文档的结构来写，避免遗漏必要的容器或类名

内容的提问来源于stack exchange，提问作者James