我可以在不使用响应式的情况下解决此问题吗？

Posted 2023-03-05

【中文标题】我可以在不使用响应式的情况下解决此问题吗？

【英文标题】：Can I fix this without using responsive?

【发布时间】：2020-12-20 22:24:33

【问题描述】：

我在 Bootstrap 中使用 card 元素，每次放大时，这 3 张卡片之间的高度是不同的（因为卡片标题）。我该如何解决这个问题，我可以在不使用响应技术@media 的情况下做到这一点吗？

这是我的 html 代码：

<div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">Massage Therapy</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        // I have to make the code section smaller, but 2 other cards are the same as the first one above
      </div>

和 CSS：

.content > .container .row .card 
    padding: 1.9rem;


.content > .container .row .card > .card-body 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    position: relative;


.content > .container .row .card > .card-body > h5 
    font-size: 2.3rem;
    margin: 4.2rem 0 2.9rem 0;


.content > .container .row .card > .card-body > p 
    font-size: 1.4rem;
    margin-bottom: 4.5rem;
    line-height: 2.6rem;


.content > .container .row .card > .card-body > button 
    width: 14rem;
    height: 4.4rem;
    font-size: 1.4rem;

Normal size:

Zoom in:

谢谢你，祝你有美好的一天！

【问题讨论】：

谢谢你们的解决方案。在问了这个之后，我还想出了另一种解决方案，就是使用 CSS text-overflow 属性。再次感谢您的回答。

【参考方案1】：

.cols 高度相同，因此您可以将卡片拉伸到列的 100%，这样无论内容或缩放如何，它们都将始终保持相同的高度。

.content > .container .row .card 
    height: 100%;
    padding: 1.9rem;

.content > .container .row .card 
    height: 100%;
    padding: 1.9rem;


.content > .container .row .card > .card-body 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    position: relative;


.content > .container .row .card > .card-body > h5 
    font-size: 2.3rem;
    margin: 4.2rem 0 2.9rem 0;


.content > .container .row .card > .card-body > p 
    font-size: 1.4rem;
    margin-bottom: 4.5rem;
    line-height: 2.6rem;


.content > .container .row .card > .card-body > button 
    width: 14rem;
    height: 4.4rem;
    font-size: 1.4rem;

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

<div class="content">
  <div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">Massage Therapy</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">Massage Therapy With More Words</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
          <div class="card">
            <img src="img/card-img.png" class="card-img-top" >
            <div class="card-body">
              <h5 class="card-title">Massage Therapy with Even More Words</h5>
              <p class="card-text">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
              <button class="btn btn-hover">read more</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

【参考方案2】：

您可以使用 flex box 并帮助自己使用 Bootstrap 4 类：

运行全页以测试行为的可能示例

/* here comes your custom css missing in bootstrap */

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><div class="row">

  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column" >
      <img src="http://dummyimage.com/200x50" class="card-img-top" >
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage <br>Therapy</h5>
        <p class="card-text mx-auto">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div>
  <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column">
      <img src="http://dummyimage.com/200x50" class="card-img-top" >
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage Therapy</h5>
        <p class="card-text my-auto">Living winged .</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div> <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 d-flex flex-column">
    <div class="card flex-grow-1 d-flex flex-column">
      <img src="http://dummyimage.com/200x50" class="card-img-top" >
      <div class="card-body flex-grow-1 d-flex flex-column ">
        <h5 class="card-title mx-auto">Massage </h5>
        <p class="card-text my-auto">Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmamen: place which.</p>
        <button class="btn btn-hover alert alert-info mx-auto">read more</button>
      </div>
    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.5/utilities/display/ & https://getbootstrap.com/docs/4.5/utilities/spacing/