Twitter bootstrap Bootstrap 3.x+；固定宽度网站

各位开发者好

我即将开始一个新的项目，我们的客户是我们的基地。在阅读了需求和设计指南后，我发现他们正在寻找固定宽度的网站，该网站将主要支持桌面浏览器，但在未来，我看到了很多潜力，他们可能希望在更紧凑版本的通讯iPad、手机上运行该网站

我曾在bootstrap 2.3发布时进行过研究，但在过去的一年里，它已经脱离了bootstrap。我知道bootstrap 2.3和3.x的强大功能，它们首先针对的是移动设备

我的问题是，从只想支持桌面浏览器的客户的角度来看，我是否有可能仍然可以使用固定宽度网站的引导功能，并为将来客户可能希望将其移植到较小的设备提供机会。在当前版本中考虑这一点似乎明智吗。我知道这不是一件不看页面或线框的复杂性就可以回答的事情。我只是想了解一些理解的诀窍

实现这一目标的最佳方式是什么

---

希望在此方面提供一些建议。

不要为viewport和rest添加metatag，使用引导结构和col-xs-classes进行开发，稍后您可以明显地将其转化为响应性

如果仍要使用引导，可以：

• 无论如何，做一个响应性强的设计，他们会（也许，你永远不会与客户^^^）对结果感到满意
• 注释所有与引导css中所需宽度无关的媒体

  /*@media (min-width: 768px) {
          .container {
                  width: 750px;
          }
  }
  @media (min-width: 992px) {
          .container {
                  width: 970px;
          }
  }
  @media (min-width: 1200px) {*/
          .container {
                  width: 1170px;
          }
  /*}*/
  

它组织得不好，但我希望它能有点帮助

由于引导定义了网格本身，这将对您有所帮助

正如您自己所提到的，bootstrap更强调移动优先的方法，但它并没有规定在使用它时使用相同的方法

框架的美妙之处在于，您可以根据自己的需求使用它。 无论是网页中的一个小元素还是一个成熟的网站，bootstrap都为您提供了定制一切的选项

说到你的情况，在我的项目开始阶段，即UI设计阶段，我也经历过很多次同样的经历。无论客户告诉你多少次（这只是一个桌面应用程序），作为一名开发人员，我们对当今网站的可用性场景有很好的了解，即如果它不是移动的，它就不在那里

考虑到你还没有给出任何关于你的网站规模和复杂性的细节，我将假设它在用户界面方面是正常的。因此，我的建议是继续使用桌面版本，并对所有页面进行清理，以便以后如果需要，您可以适应移动版本

---

另外，我已经做过很多次了，都是在一个坚实的结构的帮助下

我的方法是创建一个

div

，作为整个页面的包装。在

div

上设置一个宽度，引导程序应该响应该宽度。如果遇到

div

可能溢出的任何情况，请将该

div

的宽度（或其父级，取决于上下文）设置为

width:inherit

---

如果在桌面浏览器中查看页面，则所有内容都应保持原样，并保持固定宽度。如果在移动设备上查看，内容可能会根据您使用Bootstrap网格系统的方式进行调整，但它应该以响应迅速且优雅的方式进行调整。

我将继续使用标准的Bootstrap网格系统对网站进行布局。您没有义务使用引导CSS，您可以：

根本不加载引导CSS，自己定义布局尺寸

自定义引导CSS（请参阅）并禁用网格系统

---

后一种方法在没有响应功能的情况下，至少会给您熟悉的引导外观和感觉，而且您不必自己创建那么多样式。

要做到这一点，请首先删除引导的响应性（按照链接）

---

按照引导引导指南（连接）。您必须根据您的设计覆盖容器的宽度。一切都准备好了，而且当您想要做出响应时，只需做一些更改即可。我经常使用这种方法。

我们也遇到了类似的问题。我们的解决方案是禁用xs和sm css（即强制所有屏幕使用md或lg屏幕）

这很有效，因为移动设备已经能够很好地呈现更大的网站。还记得iPad刚推出时网站是如何呈现的吗？也许你需要放大阅读，但一切仍然有效

禁用xs和sm的最简单方法是使用引导自定义程序（）：

• 加载config.json
• 将@screen sm min设置设置为“（@screen sm/10）”
• 将@screen md min设置设置为“（@screen md/10）”

基本上这意味着，如果屏幕大小小于65px左右，您可以查看xs；如果屏幕宽度小于100px，您可以查看sm（这是不应该发生的）

如果您没有config.json，那么就更难了，因为这些变量在bootstrap的CSS中被广泛使用。我只是检查了一下，发现有53行需要更改，如果你想手动操作的话。。。不是不可能，但你要非常小心

---

尽管如此，我还是强烈建议您在一个新系统上使用它，因为您不想满足移动设备的需求（至少不是主要的需求）。

是的，当然您可以在固定宽度的网站上使用bootstrap