Bootstrap响应式扩展：1300px与1400px布局

Bootstrap响应式布局是一种设计方法，它允许网站在不同设备和屏幕尺寸上保持良好的视觉效果和功能。原有的Bootstrap框架默认提供了一种针对最大宽度为1200像素的响应式设计，当屏幕宽度超过这个范围时，其行为会自动切换到1200像素的设计模式。然而，随着现代显示器分辨率的提升，1200像素的宽度已经不能满足一些特定场景，特别是像公司portal这样的需求，可能需要更宽的视窗来展示更多的内容或者提供更好的用户体验。 为了扩展Bootstrap的响应式能力，你决定在原有基础上新增两个宽度级别：1300像素和1400像素。这涉及对`.container`、`.navbar-static-top.container`、`.navbar-fixed-top.container`和`.navbar-fixed-bottom.container`等关键元素的宽度进行调整。在1300像素的媒体查询(`@media(min-width:1300px)`)中，这些容器的宽度被设置为1270像素，以便为内容留出适当的填充空间。 同时，Bootstrap的栅格系统（`.spanX`类）的宽度也被相应地调整，例如 `.span12` 在1300像素时宽度变为1266像素，以此类推，直到`.span1` 的宽度减小到78像素。`.offsetX` 类也调整了左侧外边距，确保元素在响应式布局下保持相对位置。 对于输入框和其他固定宽度的组件，如`.input.spanX` 和 `.textarea.spanX`，它们的宽度也被调整到了适应新宽度级别的尺寸。这确保了这些元素在不同分辨率下都能正确显示并保持功能性。 通过添加这些新的媒体查询和宽度定义，你的Bootstrap布局现在可以更好地适应1300像素和1400像素的屏幕，提升了公司的portal在大屏幕设备上的呈现效果。这种灵活性使得网站在满足不同用户需求的同时，保持了跨设备的一致性和美观性。