css - 加载 twitter bootstrap responsive.css 时如何防止特定元素的响应行为？

Question

假设我有一个网格元素：

<div class="row">
  <div class="span4">...</div>
  <div class="span5">...</div>
</div>

当我在普通桌面屏幕上.span4并且.span5水平对齐时。但是，当屏幕较小时，假设电话两个 div 都“垂直”堆叠起来

这真的很棒，但我想防止这种情况发生在特定的 div 上。它有足够的空间来保持水平布局。

注意 总是有可能创建我自己的非响应式 .span (.myspan2, myspan4,...) 但除此之外还有 懒惰的解决方案吗？我不想为整个项目中的一个元素添加 8 行代码。

Answer 1

您可以将媒体查询写入特定分辨率的 div 以安排您的布局。喜欢

    /* Large desktop */
@media (min-width: 1200px) { write your styles here  }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { write your styles here  }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { write your styles here  }

/* Landscape phones and down */
@media (max-width: 480px) { write your styles here  }