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  }