容器中的 bootstrap 4 导航栏必须具有相同的宽度

Question

我是新手。我正在使用 bootstrap-4 来制作网站。其中菜单顶部和之后必须有滚动的文本以及徽标和名称。

我使用两个容器。第一个用于顶部文本滚动，第二个用于菜单栏。在第二个容器中，我使用导航栏。但导航栏的宽度与其父容器不同。 我希望两个容器和导航栏都必须具有相同的宽度

我的代码：

<header>
    <!-- top header for scrolling text marque -->
    <div class="container">
        <div class="row">
          <div  style="background-color: black; border-color: orange;  width: 100%; height: 2rem" >
          </div>
        </div>
    </div>
    <!-- for menu -->
    <div class="container" style="border: 1px; border-color:red;border-style: double;height: 4rem;">
      <nav class="navbar navbar-expand-md" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
        <a class="navbar-brand" href="#">Navbar</a>
      </nav>
    </div>
</header>

Answer 1

两个

containers

具有相同的宽度。这里唯一的问题是你没有

div

和

col

class

。如果您在

div

内添加一个带有

col-md-12

的

row

，它将匹配第二个

container

的宽度，例如：

<div class="row">
    <div class="col-md-12">
        <div style="background-color: black; border-color: orange;  width: 100%; height: 2rem"></div>
    </div>
</div>

您可以尝试的另一个解决方案是添加一个

p-0

类和第二个

container

，例如：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <!-- top header for scrolling text marque -->
  <div class="container">
    <div class="row">
      <div style="background-color: black; border-color: orange;  width: 100%; height: 2rem">
      </div>
    </div>
  </div>
  <!-- for menu -->
  <div class="container p-0" style="border: 1px; border-color:red;border-style: double;height: 4rem;">
    <nav class="navbar navbar-expand-md" style="background-color:rgba(255, 255, 128);border-style: double;border-color: red;">
      <a class="navbar-brand" href="#">Navbar</a>
    </nav>
  </div>
</header>