html - 一些 Bootstrap 元素不起作用 - Navbar-collapse 、 p- 、小列图像

问题描述

到目前为止，感谢大家提供的精彩资源。过去几天一直在努力解决这个问题。
Bootstrap 似乎在某些地方有效，但在其他地方无效。

基本功能似乎在那里。我可以添加许多特定于引导程序的元素（行、列、导航栏、响应式文本和图像），但小事情似乎没有按预期工作。

我的导航栏不会在中型或小型屏幕上展开或折叠（直接从 boostrap 的网站复制/粘贴未修改的代码在我的文档中也不起作用。JavaScript / 依赖问题？）。

      <nav class="navbar fixed-top navbar-expand-md bg-light navbar-light" role="navigation">
      <div class="container-fluid">
          <a class="navbar-brand" href="#top">
              <img class="nav-img" src="assets/images/TellusLogo.png"/>
          </a>
          <button 
              style="margin-right:3vw;"
              class="navbar-toggler" 
              type="button" 
              data-toggle="collapse" 
              data-target="#navCollapse" 
          >
              <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navCollapse">
          <ul class="navbar-nav">
              <li class="nav-item active">
                  <a class="nav-link" href="#partners">Partners</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#training">Training</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#software">Software</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#concept">Concept</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#service">Service</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#rescue">Rescue</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#contact">Contact</a>
              </li>
          </ul>
          </div>
      </div>
    </nav>

我无法为元素添加间距或间隙。添加 p-1 或 pt-4 类不提供填充。

一些 div 会忽略分配给它们的列间距（col-sm-4 不会折叠，看起来像 col-sm-12）。“vertical-align”是一个自定义类，flex 容器。出于某种原因，bootstrap 的网格也让我很伤心，但它添加了 flexbox。

              <article class="container spacer-4">
              <div class="row">
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/canary-labs.png" />
                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/codesys.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/hannah-instruments.jpg" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/inductive-automation-logo.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/ssh.png" />

                  </div>
                  <div class="col-lg-2 col-md-4 col-sm-4 vertical-align">
                      <img class="img-fluid" src="../assets/images/partners/onlogic.png" />
                  </div>
              </div>
          </article>

我最好的猜测是 jquery 或其他一些 JS 依赖项，但我已经尝试了每个脚本的多个版本，但没有结果。
这也可能是我的嵌套问题。
我通过 github -> google 域进行托管，但问题出现在我的本地开发服务器上。

我认为所有信息都在那里，但我很乐意分享任何其他有用的信息。再次感谢你！

标签： htmlcsstwitter-bootstrap

html - 一些 Bootstrap 元素不起作用 - Navbar-collapse 、 p- 、小列图像

问题描述

解决方案

推荐阅读