如何在Bootstrap中获取仅适用于最小列宽的div的CSS？

Question

我使用＆＃34; margin：0 auto＆＃34;

集中了段落

我想要h1, h2, h3 etc。当有大量空白区域时（例如在大屏幕上的全宽div中），标题会在段落的左侧开始。保留边距设置很容易。 Using @media语句可以排除较小屏幕的左边距。

我的问题是：@media没有删除边距左边，如果对象只是在使用较少列的div内，而不是较小的屏幕。如何使对象的边距不适用于较小的div？

我想在没有JavaScript的情况下这样做。必须有一种方式可以说，在这么多列或更多列的div中， 这个＆＃34;。

我是否必须编写一条规则来列出应用规则的div大小的每个变体？

漂亮的小屏幕：

Nic宽屏：

宽屏幕内的较小div：

那些使用：

    p { margin: 0.5em auto; padding: 0.4em 1em; max-width: 40em; }
    @media (min-width: 1200px)
        h1 { margin-left: 18%; }

我希望段落和标题以宽div为中心而不是将它们放在偏移列中的原因是因为我希望能够在段落中使用相同div中的全宽度表或图像。所以我真正想要的是让更小的div发生左边缘停止。

我能想出的最好的折衷方案就是将标题集中在一起，但我更喜欢左边的偏移量。

Answer 1

从另一个角度思考。让bootstrap为小屏幕做它做的事情，并且仅使用@media来纠正大型屏幕上的h1 ...。

Answer 2

我做到了！

这有点笨重，但比写出每一个实例都要好。以下代码涵盖了所有情况（注意：我使用Yesod并使用Cassius模板和缩进生成最终CSS - 我没有检查此案例是否与最终CSS匹配，但想法很清楚）：

    @media (min-width: 992px)
        h1, h2, h3, h4, h5, h6 { margin-left: 88px; }
        div[class*="col-"]
            h1, h2, h3, h4, h5, h6 { margin-left: 0; }
        div[class*="-12"]
            h1, h2, h3, h4, h5, h6 { margin-left: 88px; }
        div[class*="-11"]
            h1, h2, h3, h4, h5, h6 { margin-left: 48px; }

    @media (min-width: 1200px)
        a:only-child { white-space: nowrap; }
        h1, h2, h3, h4, h5, h6 { margin-left: 188px; }
        div[class*="col-"]
            h1, h2, h3, h4, h5, h6 { margin-left: 0; }
        div[class*="-12"]
            h1, h2, h3, h4, h5, h6 { margin-left: 188px; }
        div[class*="-11"]
            h1, h2, h3, h4, h5, h6 { margin-left: 138px; }
        div[class*="-10"]
            h1, h2, h3, h4, h5, h6 { margin-left: 88px; }
        div[class*="-9"]
            h1, h2, h3, h4, h5, h6 { margin-left: 38px; }