Bootstrap 5.0 как сделать ширину блоков(контайнеров)

Question

Как сделать ширину 3 блоков одинаковыми.В данный момент высота блоков одинаковые. Попробовал 4 блока по col не помогло

    <footer>
      <div class="container" id="footer">
        <div class="row" style="padding-top: 20px;">
          <div class="col-md-4 d-flex align-items-stretch">
            <div class="card mb-4 box-shadow">
              <div class="card-body" style="text-align: center;">
                <h5>Контакты</h5>
                <div class="contacts-padding">
                  <p class="card-text"><i class="fas fa-phone-volume"></i> &nbsp; &nbsp;<a href="tel:+78142332211">+7(814)-233-22-11</a></p>
                  <p class="card-text"><i class="fas fa-tty"></i> &nbsp; &nbsp;<a href="tel:+78142332211">+7(7132)-200-01-01</a></p>
                  <p class="card-text"><i class="fas fa-envelope"></i> &nbsp;<a href="mailto:">Задавайте вопросы по электронной почте</a></p>
                </div>  
              </div>
            </div>
          </div>
          <div class="col-md-4 d-flex align-items-stretch">
            <div class="card mb-4 box-shadow">
              <div class="card-body" style="text-align: center;">
                <h5>Адрес</h5>
                <p class="card-text"><i class="fas fa-map-marked-alt"></i>&nbsp;<a>ул.Пушкина 28.</a></p>
                <div class="ratio ratio-16x9">
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1274.7042518613946!2d57.23605730056461!3d50.28430201725987!2m3!1f0!2f0!3f0!3m2!1i1024!" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
              </div>
              
              <!-- <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" src="images/12.jpg"
                data-holder-rendered="true" style="height: 225px; width: 100%; display: block;"> -->
            </div>
          </div>
          <div class="col-md-4 d-flex align-items-stretch">
            <div class="card mb-4 box-shadow">
              <div class="card-body" style="text-align: center;">
                <h5>Социальные партнеры</h5>
                <p>UIOOFOFKkk hfjffjgjfg bnndfdmfdf,df,dlll</p>

              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </footer>

style.css

@media (min-width: 1200px) {
    .container {
      width: 1120px;
    }
}

Answer 1

У колонок ширина одинаковая, а у вложенных .card разная. Нужно .card установить ширину 100%, чтобы они растянулись.

Answer 2

Вот такое решения нашел:

div class="card h-100" style="width: 20rem;"

Это одинаковая ширина для 3 блоков. Пример:

! <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
</head>
<body>
    <footer>
        <div class="container" id="footer">
          <div class="row justify-content-center" style="padding-top: 20px;">
            <div class="col-auto mb-3">
              <div class="card h-100" style="width: 20rem;">
                  <div class="card-body">
                      <h5 class="card-title" style="text-align: center;">Контакты</h5>
                      <p class="card-text"><a href="tel:+78142332211">+7(814)-233-22-11</a></p>
                      <p class="card-text"><a href="tel:+78142332211">+7(7132)-200-01-01</a></p>
                      <p class="card-text"><a href="tel:+78142332211">+7(814)-233-22-11</a></p>
                      <p class="card-text"><a href="mailto:">Задавайте вопросы по электронной почте</a></p>
                      <p class="card-text"><a href="tel:+78142332211">+7(814)-233-22-11</a></p>
                  </div>
              </div>
            </div>
            <div class="col-auto mb-3">
              <div class="card h-100" style="width: 20rem;">
                  <div class="card-body" style="text-align: center;">
                      <h5 class="card-title" >Адрес</h5>
                      <p class="card-text" style=""><i class="fas fa-map-marked-alt"></i>&nbsp;<a>ул.Пушкина 28.</a></p>
                      <div class="ratio ratio-16x9">
                        <iframe src="https://www.google.com/maps/embed?p5987!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTDCsDE3JzAzLjUiTiA1N8KwMTQnMTIuMiJF!5e0!3m2!1sru!2skz!4v1632673650477!5" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                      </div>
                  </div>
              </div>
            </div>
            <div class="col-auto mb-3">
              <div class="card h-100" style="width: 20rem;">
                  <div class="card-body" style="text-align: center;">
                      <h5 class="card-title">Партнеры</h5>
                      <div class="row">
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                      </div>
                      <div class="row" style="padding-top: 10px;">
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                      </div>
                      <div class="row" style="padding-top: 10px;">
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                        <div class="col">
                          <img class="img-fluid" src="/images/11.jpg" alt="">
                        </div>
                      </div>
                  </div>
              </div>
            </div>
          </div>  
        </div>
        </div>
      </footer>

      
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

БЛОГ НА HUSL

Bootstrap 5.0 как сделать ширину блоков(контайнеров)

Ответы (2 шт):