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

Question

I am trying to make a banner which looks like this

In mobile it should be look like this

I am using bootstrap in this project. I am able to achieve this in web view but in mobile its not working well.

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

How to make this responsive and look like mobile view?

Answer 1

Since you are using the Grid system from Bootstrap, remove the inline css <style=" height: 400px; width: 100%;"> As you have re-defined the width so your bootstrap resizing would be over-ridden.

We use bootstrap classes so that the css library takes care of the resizing for us. You don't need to override.

Take a look at responsive design here - https://getbootstrap.com/docs/4.1/layout/grid/

Answer 2

You have a few problems to solve.

1. Don't put widths on your layout library's elements. That's just a violation of the whole idea of a layout library. Always assume that the library has a means of achieving your goal and look for it in the documentation.

2. You have oddly nested rows. Be sure to close one before opening another.

3. You have an odd closing line break tag in there (which isn't actually a thing-- br tags are self-closing). Don't use line breaks for layout. Use margins or other structural mechanisms.

Fix those things and you're in good shape. Note that I've added the border-bottom class as a starting point for customization. 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>