认为此要求很简单:结果应该是一个非常基本的登录页面,其中包含两个主题。每个主题都有一个子主题。 在移动设备上,应该只有一列连续包含Topic1,Subtopic1,Topic2,Subtopic2。 在桌面上,主题应并排出现,子主题应垂直对齐。
<div class="container-fluid">
<!-- Subtitles are on the same height but the order on mobile is wrong -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="col-md-6">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
<hr>
<!-- Display on mobile is correct but subtitles on desktop are not aligned anymore -->
<div class="row">
<div class="col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
<div class="row">
<div class="col">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
</div>
</div>
<div class="col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
<div class="row">
<div class="col">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=sm<br>and when <sm, Subtopic 1 shold be below Topic 1, not below Topic 2</p>
</div>
</div>
</div>
</div>
</div>
我不知道如何解决这个问题,我感到非常惊讶。任何提示深表感谢。
答案 0 :(得分:0)
一种方法是使用Bootstrap中的order
实用工具类,并将所有元素的标记调整为同一级别:
<div class="container-fluid">
<div class="row">
<div class="order-0 order-md-0 col-md-6">
<h1>Topic 1</h1>
<p>Four lines of text<br>Line2<br>Line3<br>Line4</p>
</div>
<div class="order-2 order-md-1 col-md-6">
<h1>Topic 2</h1>
<p>Two lines of text<br>Line2</p>
</div>
<div class="order-1 order-md-2 col-md-6">
<h2>Subtopic 1</h2>
<p>Number of lines<br>do not matter</p>
</div>
<div class="order-3 order-md-3 col-md-6">
<h2>Subtopic 2</h2>
<p>But Subtopic 1 and Subtopic 2 should be<br>vertically aligned while >=md<br>and when <md, Subtopic 1
shold be below Topic 1, not below Topic 2</p> </div> </div> <hr>
</div>
</div>
</div>
查看文档here。
另一种方法是为主题列设置预定义的固定高度,或者获取最高的主题高度,并使用JavaScript在页面加载和调整窗口大小时将其设置为所有其他高度。