我不得不制作div表,因为我没有找到一种使用引导表元素的方法。
这是图片:
代码如下:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
<div class="col-12">
<p class="text-white"><b>Lorem ipsum</b></p>
</div>
</div>
<div class="row border-left border-right text-center">
<div class="col-8 pt-3 pb-0 border-right">
<p>Lorem ipsum</p>
</div>
<div class="col-4 pt-3 pb-0">
<p>Lorem ipsum</p>
</div>
</div>
<div class="row border text-center">
<div class="col-10">
<div class="row">
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="row border-top">
<div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
</div>
<div class="row border-top">
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
<div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
</div>
</div>
<div class="col-2 pt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
</div>
</div>
现在,我希望此响应。横向滚动或任何其他方式,我们将不胜感激任何建议
答案 0 :(得分:0)
引导程序中的类col会将行划分为您添加的col元素的数量。要使其响应,请使用col-sm-12(在小型设备上为全角)等类为每种屏幕类型指定元素的宽度, col-md-6(用于中型屏幕的两列网格)等。别忘了,引导程序首先是移动的。