如何在twitter bootstrap中自定义响应列和输入字段？

Question

主要问题是如何自定义bootstrap响应css？我的代码部分有效,但我无法解决这个问题.这很难解释为了更好地理解我在屏幕截图上显示了可视化.

我在JSFIDDLE上发布了实际清理的模板代码.

现在当宽度超过1200px列时,这意味着它们是并排的两个span6: 1200px和980px之间的显示应如下所示: 在第一个导航栏崩溃时,小于979px,然后超过768px我想在集装箱中心有类似的东西: 直到下一次收缩低于768px的右栏已经跳到新线并且在进一步降低到480px及以下时保持在那里.我认为下面提供的视图适用于移动设备,并且可以在狭窄的桌面浏览器中获得更好的外观,但是当缩放两列不在中心时:

最小的宽度符合我的期望.

Answer 1

我不确定我是否理解您的问题是正确的,但您可以使用媒体查询自定义行为

// 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上找到:

responsive.less

• 响应-1200像素,min.less

• 响应-767px-max.less

• 响应-768px-979px.less

• 响应-navbar.less

• 响应-utilities.less

尽管如此,只有在你必须的时候才能使用这些设置.