css - 我的专栏不断相互碰撞

Question

因此，我试图让两个超大屏幕指示进入我网站的两个门户。在中大屏幕上，它们并排出现，中间有间距。在平板电脑或移动设备上，我希望将超大屏幕堆叠起来。当我缩小页面时，bootstrap 3 上的文档会自动发生这种情况，但是这并没有发生在我身上。我不确定我做错了什么，我真的是 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>

Answer 1

尝试将您的代码更改为:

<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 和偏移类简单地围绕超大屏幕创建一个 div。