如何在 bootstrap 4 上制作响应式布局

Question

Currently the web page looks like this: i trying to make the page in the row 2 at grid of image inside row and the result is reverse目前网页看起来像这样：我试图在第 2 行中的图像网格中制作页面，结果是相反的

Now on resize to mobile screen flex column the container: i was trying to fix on overflow现在将容器调整为移动屏幕 flex 列的大小：我试图修复溢出

html : html :

 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap 4 Responsive Layout Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="col-md-12 col-lg-4 col-xl-5"> <h2>PROTECT YOUR BUSINESS WITH OUR NHS ASSURED FACE VISOR</h2> <p>Designed with care and comfort in mind</br> Our innovative face visor is designed with care, comfort and personalisation in mind. Developed specifically to help during covid-19 you can be assured of a product that meets NHS standards, that will protect your business, your staff and you.</p> <p><a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a> <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p> </div> <div class="col-md-6 col-lg-4 col-xl-3"> <img src="img/3-layers.png"> </div> </div> <div class="row my-5"> <div class="col-md-12 col-lg-4 col-xl-5"> <h2>OUR UNIQUE RAMFOAM CARE PROCESS IS AS SAFE AS OUR VISOR</h2> <p>We can fully brand your face visor to your company colours and deliver hundreds of thousands of visors to you safely and securely. Our process is as safe as our visor. We've created a unique comfortable, adjustable and re-usable PPE item that features a medically approved, hypo- allergenic foam headpiece with a fully replaceable anti-fog visor system which is delivered in two pieces for easy storage and self-assembly.</p> </div> </div> <div class="row mb-5"> <div class="col-md-6 col-lg-4 col-xl-5"> <h2>PROTECT YOUR BUSINESS WITH THE BEST IN THE BUSINESS</h2> <p>Receive your visors within five working days Our innovative face visor is designed with care, comfort and personalisation in mind. Developed specifically to help during covid-19 you can be assured of a product that meets NHS standards, that will protect your business, your staff and you. </p> <p><a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a> <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p> </div> <div class="col-md-6 col-lg-4 col-xl-5"> <div class="card bg-default"> <div class="card-body"> <h4 class="text-center text-uppercase my-3">contact sales</h4> <p class="text-center mb-4">Please drop us email through the form below and we'll be in touch withing 24 hours.</p> <form role="form"> <div class="form-group"> <input class="form-control" placeholder="NAME" type="text"> </div> <div class="form-group"> <input class="form-control" placeholder="EMAIL" type="email"> </div> <div class="form-group"> <input class="form-control" placeholder="PHONE" type="number"> </div> <div class="form-group"> <textarea class="form-control textarea-custom" rows="3" placeholder="MESSAGE"></textarea> </div> <div class="form-group"> <button class="btn btn-light text-right text-uppercase" type="button">submit</button> </div> </form> </div> </div> </div> </div> </body> </html>

i was trying to override the bootstrap template in the result after save the coding and i get overflow (not responsive)我试图在保存编码后覆盖结果中的引导程序模板，但出现溢出（无响应）

Answer 1

Try this one.试试这个。 It's the most basic form.这是最基本的形式。

<html>
...
<body>
     <div class="container">
          <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">...</div>
          </div>
          <div class="row">
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
              <div class="col-md-4 col-sm-4 col-xs-4">...</div>
          </div>
     <div>
</body>
</html>

Also I think you might find it helpful to look at the difference between container and container-fluid in Bootstrap and the definition of row and col .此外，我认为您可能会发现查看Bootstrap container和container-fluid之间的区别以及row和col的定义会很有帮助。 That is so simply concept.就是这么简单的概念。

如何在 bootstrap 4 上制作响应式布局

问题描述

1 个解决方案

解决方案1
0 2020-09-13 02:21:48

如何在 bootstrap 4 上制作响应式布局

问题描述

1 个解决方案

解决方案1 0 2020-09-13 02:21:48

解决方案1
0 2020-09-13 02:21:48