Question

当前网页如下所示： i trying to make the page in the row 2 at grid of image inside row and the result is reverse

现在，将容器大小调整为可移动屏幕的弹性列： i was trying to fix on overflow

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>

在保存编码后，我试图覆盖结果中的引导程序模板，但我溢出（无响应）

Answer 1

尝试这个。这是最基本的形式。

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

另外，我认为查看container中container-fluid和Bootstrap之间的区别以及row和col的定义可能会有所帮助。这就是这么简单的概念。

如何在Bootstrap 4上进行响应式布局

1 个答案: