动态设置容器宽度答案

【问题标题】：Setting container width dynamically动态设置容器宽度
【发布时间】：2020-10-29 22:07:29
【问题描述】：

我是 Bootstrap 的新手，并且在项目中使用 bootstrap 4。我在 Invision 中获得了一个设计，它具有以下尺寸：全屏（容器流体）：1920px 容器宽度（共12列）：1408px 装订线宽度：16px

我的笔记本电脑上的容器液体大小：1349px。这是 100% 的大小，从浏览器的检查工具中获得。

问题：如何根据屏幕大小动态定义容器的大小，以使给定设计中的大小比例保持不变。另外，是否可以相应地设置页面元素的字体大小和边距和填充？

我已经放置了这个 CSS，它使我的容器和容器流体大小相同，即 1349 像素。

 @media (min-width: 1264px) {
            .container{
            max-width: 1395px;
        }

谢谢

【问题讨论】：

使用 .Container-fluid 类代替容器。如果您想提供动态大小，请在媒体查询中使用 !important。

标签： twitter-bootstrap bootstrap-4 responsive-design

【解决方案1】：

Bootstrap 会自动调整行和列以适应所有屏幕尺寸，确保元素在“container-fluid”或“container”类中，放入“div”类“row”，一切都会根据您在行中定义的列自动调整。从这里阅读更多信息：https://getbootstrap.com/docs/4.0/layout/grid/

所有字体、边距和内边距都可以通过基本 CSS 轻松更改。如果不起作用，请在规则中添加“！important”。

【讨论】：