如何在引导中获得仅适用于最小列宽的div的CSS？

我使用边距0自动将段落居中

我希望h1、h2、h3等标题在有大量空白的情况下，比如在大屏幕上的全宽div中，从段落左侧开始。使用左边距设置很容易。使用@media语句可以排除较小屏幕留下的空白

我的问题是：@media不会删除剩余的边距，如果对象位于使用较少列的div中，而不是较小的屏幕。如何使对象的边距不适用于较小的div

我想在没有JavaScript的情况下完成这项工作。有一种方式可以说，这是在许多列或更多列的div中

我是否必须编写一个规则，列出要应用该规则的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中，让利润率保持不变

---

我能想到的最好的折衷办法就是把标题居中，但我更喜欢左边的偏移量。

换个角度想。让bootstrap做它在小屏幕上做的事情，并且只使用@media来更正h1。。。在大的上面。

我做到了

这有点笨重，但总比写出每一个实例要好。以下代码涵盖了所有案例注意：我使用的是YesSOD，它使用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; }

---

我认为这里的一些代码或图片对理解你的问题比用文字描述更有用。你也可以尝试在页边空白处使用%值。为了清晰起见，我编辑了这篇文章。我已经在尝试%value，但这不是答案。谢谢，但这并不能解决问题。如果没有@媒体，小屏幕也可以。所以小屏幕不是问题所在。问题是CSS在大屏幕上适合宽div，但在大屏幕上不适合小div。基本上，我想要的不是@media，而是@wide，这样一个瘦div就可以做与小屏幕相同的功能了。实际上，这并不能解决非列div。我不确定我们是否会使用它们，但如果我们在不同大小或灵活大小的随机其他div中有标题和段落，那么我想我需要为这些情况添加规则。