主要问题是如何自定义引导响应 css？我的代码部分有效，但我无法解决这种情况。很难解释，所以为了更好地理解，我在屏幕截图上呈现了可视化。
我在JSFIDDLE上发布了实际清理过的模板代码。
现在，当宽度大于 1200px 列时可以，这意味着它们是两个并排的 span6：
在 1200px 和 980px 之间显示应该看起来像：
在第一个导航栏折叠时小于 979px 和大于 768px 我想有类似的东西容器中心：
直到下一次收缩低于 768 像素时，右栏会跳转到新行并在进一步减少到 480 像素及以下时停留在那里。我认为下面显示的视图适用于移动设备，并且在狭窄的桌面浏览器中看起来更好，但缩放时两列都不在中心：
最小的宽度符合我的期望。
我不确定我是否正确理解您的问题，但您可以使用媒体查询自定义行为
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
// Large desktop
@media (min-width: 1200px) { ... }
也许你必须覆盖一些类和 id。响应信息可以在 git 上找到：
不过，只有在您确实需要时才使用这些设置。