css 当收缩网站的大小时，主体不是100%宽度

xdyibdwo 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(84)

当我降低网站的大小时，检查它，身体不是100%的屏幕宽度。

当我删除Bootstrap类时，它似乎可以正常工作。添加了一个body{width: 100%}，但没有结果。我注意到从类中删除“p-md-4”会使差距变小。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<header class=" row align-items-center bg-primary">
  <div class="col-md-3 col-sm-6 col-12 mt-md-0 mt-0 p-md-4 ms-md-2 ms-3 p-3">
    test
  </div>
</header>

css

来源：https://stackoverflow.com/questions/77283190/when-shrinking-sites-size-body-is-not-100-width

1条答案

按热度按时间

n3h0vuf21#

确保您了解像col这样的主结构类上的样式，并且不要添加任何会出错的东西。根据Bootstrap的文档，还要确保在行外使用容器元素。这很关键
如果您的目标是在列内容周围创建空间，请在列上使用填充（这不会影响列的大小或位置）或其他带边距的内部元素。不要移动柱子。
当然，你也可以全面修改排水沟的大小，这可能比一次性覆盖更好。参见https://getbootstrap.com/docs/5.3/layout/grid/#sass-variables。
此外，请按正确的顺序（移动的优先）列出列大小类。这是Bootstrap世界中的一个约定，使您的标记更容易解释。它也对应于实际的CSS媒体查询的编写方式。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <header class="row align-items-center bg-success">
    <div class="col-12 col-sm-6 col-md-3">
      <div class="m-4 bg-warning">test</div>
    </div>
  </header>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 当收缩网站的大小时，主体不是100%宽度

1条答案

相关问题

热门标签

最新问答