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解决方案...

JavaScript可以获取一张图片的高度，设置相应的较短卡的高度
可以为每个卡分配一个硬数字作为高度
看看基于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>

bootstrap4列和行

1 个答案: