如何使用引导程序使我的横幅响应

Question

我正在尝试制作一个看起来像这样的横幅

在移动设备中它应该是这样的

我在这个项目中使用引导程序。 我能够在 web 视图中实现这一点，但在移动设备中它不能很好地工作。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div style="background-color:#BBD4FD"> <div class="container"> <div class="row block"> <div class="row-md align-items-center pt-4" style="height: 100px;"> <h1 class="text-center" style="letter-spacing: .1rem; font-size: 4rem; color:#183C77">Know how DrinkPrime solves the problem</h1> </div> <div class="row"> <div class="col-md align-items-center one" style=" height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> <div class="col-md one" style="height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> <div class="col-md " style="height: 400px; width: 100%;"> <div class="text-center">One of three columns</div> </div> </div> </br> </div> </div> </div>

如何使这种响应式并看起来像移动视图？

Answer 1

由于您使用的是 Bootstrap 的网格系统，因此删除内联 css <style=" height: 400px; width: 100%;">因为您重新定义了宽度，因此您的引导程序调整大小将被覆盖。

我们使用引导程序类，以便 css 库为我们处理调整大小。 你不需要覆盖。

在此处查看响应式设计 - https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

你有几个问题需要解决。

1. 不要在布局库的元素上放置宽度。 这只是违反了布局库的整体理念。 始终假设库有实现目标的方法，并在文档中查找。

2. 你有奇怪的嵌套行。 在打开另一个之前一定要关闭一个。

3. 你必须有一个奇怪的收线突破标签（这实际上不是一个件事- br标签是自闭）。 不要在布局中使用换行符。 使用边距或其他结构机制。

解决这些问题，你的状态就很好。 请注意，我已经添加了border-bottom类作为自定义的起点。 边界文档

 .height-100 { min-height: 100px; } h1.styled { letter-spacing: .1rem; font-size: 2rem; color: #183C77; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <div style="background-color:#BBD4FD"> <div class="container"> <div class="row"> <div class="align-items-center pt-4"> <h1 class="text-center styled">Know how DrinkPrime solves the problem</h1> </div> </div> <div class="row"> <div class="col-md height-100 border-bottom align-items-center"> <div class="text-center">One of three columns</div> </div> <div class="col-md height-100 border-bottom"> <div class="text-center">One of three columns</div> </div> <div class="col-md height-100 border-bottom"> <div class="text-center">One of three columns</div> </div> </div> </div> </div>