Question

我有一个包含两列的页面。所有工作都很好，反应灵敏，但我注意到当我调整到移动视图时，第二列堆叠在下面（很棒！）但是内容正好在第一列的内容之下，所以看起来很糟糕。

有没有办法创建这个间距？尝试使用类和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

有没有办法创建这个间距？

是的。可以通过使用@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>

Bootstrap - 第二列顶部填充？

1 个答案: