如何使用 bootstrap 让我的横幅响应

Question

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

在移动端应该是这样的

我在这个项目中使用 bootstrap。我可以在网络视图中实现这一点，但在移动设备中效果不佳。

<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%;"> 由于您重新定义了宽度，因此您的 bootstrap 调整大小将被覆盖。

我们使用 bootstrap 类以便 css 库为我们处理大小调整。您不需要覆盖。

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

Answer 2

您有几个问题需要解决。

不要在布局库的元素上设置宽度。这只是违反了布局库的整体理念。始终假设库有实现您的目标的方法，并在文档中查找它。
您有奇怪的嵌套行。一定要先关闭一个再打开另一个。
你那里有一个奇怪的结束换行符标签（这实际上不是一件事——br 标签是自动关闭的）。不要使用换行符进行布局。使用边距或其他结构机制。

解决这些问题，您的状态就会很好。请注意，我添加了 border-bottom class 作为自定义的起点。 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>

如何使用 bootstrap 让我的横幅响应

How to make my banner responsive using bootstrap

html

css

responsive-design

bootstrap-4