引导导航破坏站点宽度

Posted 2023-03-21

【中文标题】引导导航破坏站点宽度

【英文标题】：Bootstrap Navigation destroying site width

【发布时间】：2022-01-05 02:00:07

【问题描述】：

Nav 正在改变网站宽度。我不知道这是为什么。 我认为那是因为边距或填充，但找不到任何解决问题的方法。 我得出的结论是造成问题，但我不知道为什么会这样。 请帮忙！

html 代码：

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">IT SPECIALIST</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" id="active" href="#">GŁÓWNA</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              O NAS
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Zespół</a>
              <a class="dropdown-item" href="#">Partnerzy</a>
              <a class="dropdown-item" href="#">Facebook Fanpage</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              OFERTA
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Odzyskiwanie Danych</a>
              <a class="dropdown-item" href="#">Wsparcie dla twojej firmy</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">USŁUGI DLA FIRM I OSÓB PRYWATNYCH</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">DLACZEGO MY</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="nav-link" href="#">ZGŁOŚ AWARIĘ</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <div class="col-md-2"></div>
</div>

我删除了整个 css 代码，没有任何改变，但如果你需要它，这里是：

CSS 代码：

body 
  margin: none;
  padding: none;


.navbar .navbar-brand 
  margin-left: 1vw;


.navbar button 
  margin-right: 1vw;


.navbar .dropdown-item:hover, .navbar #nav-link:hover, .navbar #active 
  background-color: #5394dd;
  color: white;


.navbar .nav-item 
  margin-left: 0.5vw;


.navbar .nav-item:last-child 
  margin-right: 1vw;

编辑 1： row 解决了这个问题，在使用导航时，没有任何行和列，导航占用了整个站点的宽度，仅此而已。 那么，还有其他方法可以像这样将站点居中吗？

【问题讨论】：

无论您发布什么代码，这是否包含在具有row 类的 div 中？

是的。我会编辑那个

Bootstrap 包含标准的 CSS，它负责处理边距和填充。通过添加更多我们自己的 CSS，我们增加了更多出错的机会。这是 Bootstrap 4 的间距文档...您可以简单地添加 p 用于填充和 m 用于边距...getbootstrap.com/docs/4.0/utilities/spacing

@OskarB 如果您只想在一定宽度内拥有导航，也许使用container？这样，它将在所有中到大屏幕的中间。

<div class="container-lg p-0"> 已解决所有问题，感谢您的帮助！

【参考方案1】：

我不确定它究竟是如何破坏网站的宽度的，但请尝试将此添加到您的样式中：

*
margin: 0;
padding: 0;

【参考方案2】：

从导航栏周围删除所有col，然后添加一个container。

<div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <!--Your nav content here-->
   </nav>
</div>