Блог

Главная - Вопросы по программированию - Как сделать адаптивный макет на bootstrap 4

Как сделать адаптивный макет на bootstrap 4

#javascript #html #css #bootstrap-4

#javascript #HTML #css #bootstrap-4

Вопрос:

В настоящее время веб-страница выглядит следующим образом: я пытаюсь создать страницу в строке 2 в сетке изображения внутри строки, и результат обратный

Теперь при изменении размера контейнера на экран мобильного устройства: я пытался исправить переполнение

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 amp;raquo;</a>
        <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More amp;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 amp;raquo;</a>
        <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More amp;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>

я пытался переопределить шаблон начальной загрузки в результате после сохранения кода, и я получаю переполнение (не реагирует)

Комментарии:

1. строки и столбцы должны быть обернуты одним контейнером, .container или .container-fluid .

2. Хорошо, итак, следующий шаг, если я поместил контейнер?

3. Невозможно объяснить сетку начальной загрузки таким образом, вы должны прочитать документацию по bootstrap 4 или просто скопировать и изменить пример начальной загрузки.

Ответ №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 . Это такая простая концепция.