因此,我试图让两个超大屏幕指示进入我网站的两个门户。在中大屏幕上,它们并排出现,中间有间距。在平板电脑或移动设备上,我希望将超大屏幕堆叠起来。当我缩小页面时,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>
最佳答案
尝试将您的代码更改为:
<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。
关于css - 我的专栏不断相互碰撞,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23124322/