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

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 中的 Grid 系统，请删除内联 css <style=" height: 400px; width: 100%;"> 由于您重新定义了宽度，因此您的引导调整大小将被覆盖。

我们使用引导类，以便 css 库为我们负责调整大小。你不需要重写。

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

Answer 2

你有几个问题要解决。

1. 不要在布局库的元素上设置宽度。这只是违反了布局库的整个想法。始终假设该库有办法实现您的目标并在文档中查找它。

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

3. 你有一个奇怪的结束换行标签（这实际上不是一个东西--br 标签是自动关闭的）。不要在布局中使用换行符。使用边距或其他结构机制。

解决这些问题，您的状态就会很好。请注意，我添加了 border-bottom 类作为自定义的起点。 Border docs

.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>