响应式引导宽度答案

【问题标题】：Responsive Bootstrap width响应式引导宽度
【发布时间】：2023-03-31 07:14:01
【问题描述】：

我正在使用 1045 像素的包装宽度。我想使用“twitter Bootstrap”框架。但我对 twitter Bootstrap 网格布局感到困惑。我知道，引导包装器宽度（响应式）为 1170 像素。我可以制作宽度为 1045px 的包装器吗？实际上，我对这个项目非常严格。 我必须使用 1045 像素宽度。谁能解释一下，twitter bootstrap可以吗？或者是否有任何其他网格框架适用于这个包装器宽度？

谢谢

【问题讨论】：

标签： html twitter-bootstrap responsive-design grid

【解决方案1】：

使用 boostrap 类，例如 class="container"，在这个 div 中使用 class="col-lg-12" 表示大

  <div class ="col-lg-12">
       <div class='container'>
         <div class="col-lg-12">
         </div>
       </div>
    </div>
    <style type="text/css">
        @media (min-width: 1200px) {
        .container{
        width:1045px;
        }
        }
</style>

enter link description here

【讨论】：

div class="col-lg-12" 用于大视图。但我期待包装器/容器宽度 1045px 。这个类是这个包装器还是容器宽度？
你在 class="container" 中使用 col-lg-12 类

【解决方案2】：

一个简单的方法是通过http://getbootstrap.com/customize/。当您对其进行自定义并自定义时，您可以将每个容器大小设置为您想要的任何大小。然后当您下载自定义编译的 Bootstrap 时，它将全部计算为这些宽度。

【讨论】：

【解决方案3】：

是的，您可以，并且有多种方法可以做到这一点。你可以用 SASS 或 LESS 自定义 Bootstrap，你可以 customize and download your own version 的 Bootstrap 或者你可以很酷，使用以下：

<div class="container-fluid">
<div class="row">
  whatever
</div>
</div>

然后在你的 CSS 中

.container-fluid{max-width:1045px;}

这样，您将保持响应能力，是的，无论如何，您的内容都不会超过 1045 像素

【讨论】：

如果我更改为 1045 像素的中型设备视图，而其他视图（小型和大型设备）保持不变，可以吗？然后我可以使用，

不管什么
是的。这就是您设置 MAX-WIDTH 的原因。 container-fluid 是一个 Bootstap 类，可以流畅地调整到任何宽度，可用于全宽度、全屏布局。所以，无论你的屏幕是 10000px 还是 100px，它都会一直调整。通过设置最大宽度，您可以确保 Bootstrap 行为保持在 1045 像素以下，但它不会超过 1045 像素，它会简单地停在那里，因此它将完全响应到 1045 像素，然后，表现得只是作为固定大小的布局