Question

我正在使用自举网格，但我有些怀疑。

我想要一个标题，我左边有一些标识，右边有一些链接。在这个标题下面我想要一个与上面内容相同的菜单。

我在这个示例中有这个：https://jsfiddle.net/v529b4mz/1/，它正在运行。但有两个问题：

例如，如果屏幕大小是1920px，我的内容周围有一些白色边距，如果屏幕调整大小，周围的空间会减少，有一点是媒体查询发生变化，当媒体查询发生变化时，会再次出现更多周围的白色空间，但我想没有太多的空间。因此，当媒体查询发生变化时，我希望减少空间，以便内容可以占用更多空间。

你知道怎么做吗？

例如，如果我想在此示例中使用背景颜色为绿色的菜单：https://jsfiddle.net/v529b4mz/1/在所有媒体查询中除了我要隐藏此菜单并显示移动菜单的额外小媒体查询。如何以不必要的方式减少字体大小或列表项的填充，或者两者都减少，而是利用周围的空白区域，以便列表项在小媒体查询中显得清晰？

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

注意：标题和节元素只是为引导容器提供全宽背景颜色。

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在两个给定断点之间创建固定宽度网格。
你可以用.container-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>

媒体查询更改后减少空格

1 个答案: