Css 我的专栏不断地互相碰撞

因此，我尝试使用两个Jumbotron来指示进入我的站点的两个门户。在中大屏幕上，它们并排出现，中间有间隔。在平板电脑或移动设备上，我希望jumbotrons能够堆叠起来。当我缩小页面时，Bootstrap3上的文档会自动实现这一点，但是这不会发生在我身上。我不确定我做错了什么，我对bootstrap真的很陌生。现在，当它变成一个中等大小的屏幕时，空白消失了，它们被并排挤压

我的html如下所示：

<div class="container-fluid">
    <div class="row">
        <div class="container special">
            <div class="clearfix visible-sx"></div>
            <div class="jumbotron text-center col-md-5 col-md-offset-1">
                <h1>Become a Screener</h1>
                <p>Yahh a screener.</p>
                <a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
            </div>

            <div class="jumbotron text-center col-md-5 col-md-offset-1">
                <h1>Have your books screened</h1>
                <p>yah an author.</p>
                <a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
            </div>
        </div>
    </div>
</div>

成为一名筛选员
是啊，一个筛选者

你的书经过筛选了吗
是一位作家

尝试将代码更改为：

<div class="container-fluid">
    <div class="row">
        <div class="container special">
            <div class="clearfix visible-sx"></div>
            <div class="col-sm-5 col-md-offset-1">
                <div class="jumbotron text-center">
                    <h1>Become a Screener</h1>
                    <p>Yahh a screener.</p>
                    <a class="btn btn-danger" href="{% url 'screener_info' %}">More Info</a>
                </div>
            </div>
            <div class="col-sm-5 col-md-offset-1">
                <div class="jumbotron text-center">
                    <h1>Have your books screened</h1>
                    <p>yah an author.</p>
                    <a class="btn btn-success" href="{% url 'author_info' %}" role="button">More Info</a>
                </div>
            </div>
        </div>
    </div>
</div>

成为一名筛选员
是啊，一个筛选者

你的书经过筛选了吗
是一位作家

---

只需使用md-5和offset类在jumbotrons周围创建一个div。

这固定了间距，因此间距保持不变，但是，当它到达sm或sx大小时，它不会堆叠。对于小屏幕，您需要使用col-sm-5而不是col-md-5。有趣的是，当您发布：D OK，现在的问题是，当一个文本比另一个文本长时，Jombotron的大小不再相同：（添加媒体查询，并在jumbotron中断时更改字体大小（使其变小）