0

Как сделать ширину 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;
    }
}
1
  • Родительские блоки с классом col-md-4, которых у вас ровно 3 - как раз имеют одинаковую ширину, так устроен бутстрап, а вот уже вложенные в них дочерние блоки имеют в стилях те или иные отступы. В эту сторону и смотрите.
    – Quazimorda
    30 сен 2021 в 8:43

2 ответа 2

0

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

0

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

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/bootstrap@5.0.2/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/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

5
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справке. 30 сен 2021 в 12:26
  • 1
    у вас в вопросе было написано, что высота одинаковая, а ширина разная. Не ясно почему вы ответом пишите, что надо было поставить h-100, который выравнивает высоту. вы напутали в вопросе?
    – teran
    30 сен 2021 в 12:29
  • да спасибо ! подправил немного.Можете подсказать как выровнять кнопки внутри каждого card?
    – Zero01
    30 сен 2021 в 12:52
  • 1
    вот что точно не надо это делать 20rem ширину
    – teran
    30 сен 2021 в 12:54
  • Почему? Оно адаптируется и показывает хорошо для других устройств.
    – Zero01
    30 сен 2021 в 13:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.