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>

我需要让所有列显示相同的宽度和高度。移动设备中的两列和三行。目前桌面上的三列两行对我来说还可以。

Answer 1

在具有网格系统和可变高度图像的 Bootstrap-3 中执行此操作并不是一个简洁的 OOTB 纯 css 解决方案......

1. JavaScript 可以获取一张图片的高度，然后 设置相应较短卡片的高度
2. 可以为每张卡片指定一个硬数字作为高度
3. 查看基于 bootstrap-4 flexbox 的解决方案

以下代码（根据上面的数字 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>