Div 屏幕宽度为 100%，但仍然有响应行为？

Question

我正在尝试设置 div 屏幕宽度，但 没有使用 ：

div { 
  position: relative;
  left: 0;
  right: 0;
}

因为这会破坏模板。

这可能吗？

Answer 1

你没有提交任何代码，但我会在没有 Twitter 的情况下回答你的问题。

即使父元素是静态定义的，所有子元素也将动态流动（在父元素的限制内），直到你对这些子元素施加静态限制。

main {bottom: 0; left: 0; overflow: auto; position: absolute; right: 0; top: 0;}

本例中 main 元素中的所有元素仍将动态扩展以使用屏幕宽度的 100%，无论屏幕的 种类如何 .

不使用 position 属性如果您不设置宽度，像 div 这样的块元素将自动使用其父级可用宽度的 100% 除非设置为浮动；除非您指定宽度（inherent 或 auto).

我假设您正在使用的页面上已有内容，因此除非您可以编辑整个 (X)HTML页面然后有机会你将被迫使用 position 属性.

Answer 2

如 Bootstrap 文档中所述，您可以使用两种不同类型的容器类。一种具有固定宽度，称为 "container"，另一种称为 "container-fluid"，它横跨视口的整个宽度。

代码：

<div class="container-fluid">
  ...
</div>

Div width 100% of the screen but still responsive behavior?