html - Bootstrap - 第二列顶部填充？

Question

我有一个包含两列的页面。一切都很好而且 react 灵敏，但是，我注意到当我调整到移动 View 时，第二列堆叠在下面(太棒了!)但是内容就在第一列内容的正下方所以看起来很糟糕。

有没有办法创建这种间距？尝试使用类和 ID 定位并使用边距和填充，但似乎没有什么不同。

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <h1>Title</h1>
            <p>Little bit of content</p>
        </div>
        <div class="col-sm-6 col-sm-offset-1">
            <h1>Title</h1>
            <p>Little bit of content</p>
        </div>
     </div>
</div>

Answer 1

Is there a way to create this spacing?

是的。这可以通过使用 @media 查询将某些样式应用于特定断点上的第 2、3、... 列来实现。例如:

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    [class*="col-"] + [class*="col-"] {
        padding-top: 1em; /* for instance */
    }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-5">
            <h1>Title</h1>
            <p>Little bit of content</p>
        </div>
        <div class="col-sm-6 col-sm-offset-1">
            <h1>Title</h1>
            <p>Little bit of content</p>
        </div>
     </div>
</div>