媒体查询更改后减少空白

Question

我正在使用引导网格，但我有一些疑问。

我想要一个标题，左边有一个标志，右边有一些链接。在此标题下方，我希望有一个与上述内容相同的菜单。

我在这个例子中有这个：https://jsfiddle.net/v529b4mz/1/，它正在工作。但是有两个问题：

• 例如，如果屏幕大小为 1920 像素，我在内容周围有一些白色边距，如果调整屏幕大小，则周围的空间会减少，并且媒体查询会发生变化，当媒体查询发生变化时，还会有更多周围有空白，但我不想有太多空间。因此，当媒体查询发生变化时，我希望周围的空间更少，以便内容可以占用更多空间。

你知道怎么做吗？

例如，如果我想在此示例中使用背景颜色为绿色的菜单：https://jsfiddle.net/v529b4mz/1/ 在所有媒体查询中，除了我想隐藏此菜单并显示移动菜单的超小型媒体查询。如何做到这一点，而不需要过多地减少列表项的字体大小或填充，或两者兼而有之，而是利用周围的空白区域，使列表项在小型媒体查询中看起来清晰可见？

而且，列表元素之间有一些边距，你知道为什么吗？

注意：header 和 section 元素只是为引导容器提供全宽背景色。

HTML：

<header style=background:yellow;>
  <div class="container">
    <div class="row">
      <div class="col-2" style="background-color: orange">
        Logo
      </div>
      <div class="col-10 d-flex justify-content-end" style="background-color: pink; ">
        Links
      </div>
    </div>
  </div>
</header>

<section style="background:pink;">
  <div class="container">
    <div class="row" style="background-color: green">
      <div class="col-12">
        <ul>
          <li><a href="">Item1</a></li>
          <li><a href="">Item2</a></li>
          <li><a href="">Item3</a></li>
          <li><a href="">Item4</a></li>
          <li><a href="">Item5</a></li>
          <li><a href="">Item6</a></li>
          <li><a href="">Item7</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

CSS：

*{
  box-sizing:border-box;
}
ul{
  display: flex; 
  align-items: center; 
  list-style:none;
  justify-content:space-between;
}
ul li{
  padding:20px;
  border:1px solid gray;

}

Answer 1

您正在使用 .container 在 2 个给定断点之间创建一个固定宽度的网格。
您可以将其替换为 .container-fluid，即...fluid :)
请注意，您必须在 section 父级上手动设置一些填充：可以是以 rem、em 或 px 为单位的固定填充，或者与 vw 单位的视口宽度成正比（100vw = 视口的宽度) 或混合使用，具体取决于分辨率。

---

Relevant documentation（您的小提琴中看到的 Bootstrap 4.0）

容器提供了一种使网站内容居中的方法。将 .container 用于固定宽度或 .container-fluid 用于全宽度。

---

Updated Fiddle

<section style="background:pink;">
  <div class="container-fuild">
    <div class="row" style="background-color: green">
      <div class="col-12">
        <ul>
          <li><a href="">Item1</a></li>
          <li><a href="">Item2</a></li>
          <li><a href="">Item3</a></li>
          <li><a href="">Item4</a></li>
          <li><a href="">Item5</a></li>
          <li><a href="">Item6</a></li>
          <li><a href="">Item7</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>