Question

所以我试图让两个jumbotrons指示我的网站有两个门户网站。在中大屏幕上，它们并排显示，两者之间有间距。在平板电脑或移动设备上，我希望将jumbotrons堆叠起来。引导程序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和偏移类创建一个围绕jumbotrons的div。

我的专栏不断砸到彼此

1 个答案: