bootstrap4 столбцы и строки

Question

У меня есть код со строкой, которая имеет два столбца и три строки. В мобильном устройстве он выглядит не очень хорошо, некоторые столбцы появляются дольше, чем другие. Ниже приведен код.

Ниже приведен код, который у меня есть на данный момент

    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6; cursor: pointer;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}"style="height:auto;" /></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/policy.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a ><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
        <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
            <a ><img class="image img-rounded img-responsive center-block" src="{{=URL('static', 'images/burn.jpg')}}" style="height:auto;"/></a>
            <a><p class="audiowide" style="">Track more</p></a>
        </div>
    </div>
</div>

Мне нужно, чтобы все столбцы были одинаковой ширины и высоты. Два col и три строки в мобильном устройстве. Текущие три столбца и две строки на рабочем столе - это нормально для меня.

Answer 1

Выполнение этого в Bootstrap-3 с сеточной системой и изображениями переменной высоты не будет отличным решением OOTB pure css ...

1. Это возможно с JavaScript, получая высоту одного изображенияи установка высоты соответствующей более короткой карты
2. Это возможно, если вы присваиваете жесткое число в качестве высоты для каждой карты
3. Посмотрите на решение на основе flexbox для bootstrap-4

В следующем коде (в соответствии с номером 2 выше) жесткие числа используются в качестве максимальной высоты, чтобы получить эффект, который может вам помочь ... другие 2 решения потребуют дополнительной доработки для вас

.likes_comments1 {
  margin-bottom: 10px;
}

.likes_comments1 a img {
  max-height: 210px;
}

@media screen and (max-width:768px) {
  .likes_comments1 a img {
    max-height: 200px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6; cursor: pointer;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/Jumbo.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 1</p>
    </a>
  </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/JumboMob.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 2</p>
    </a>
  </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/Jumbo.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 3</p>
    </a>
  </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/JumboMob.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 4</p>
    </a>
  </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/Jumbo.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 5</p>
    </a>
  </div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4" style="text-align:center;font-family:'Audiowide'; font-size: 1.2em;">
  <div class="likes_comments1" style="border-radius:7px; border: solid thin #38D9D6;">
    <a><img class="image img-rounded img-responsive center-block" src="https://www.akberiqbal.com/JumboMob.jpg" style="height:auto;" /></a>
    <a>
      <p class="audiowide" style="">Track more 6</p>
    </a>
  </div>
</div>
</div>