css - 如何设置 Bootstrap 文本和卡片大小的大小

Question

我使用 Bootstrap 实现了卡片。但是我的卡片大小根据文本字符的数量而变化。详细信息链接也在变化，当我缩小浏览器时，它会覆盖我的卡片文本。如何固定卡片文本(类:card-text)的大小以避免重叠并避免卡片大小不同？

<div class="card">
  <div class="img-dimension">
   <img class="card-img-top" src="img.jpg">
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>        
    <div class="card-text">
            <p>
                My long card-text....Phasellus a est. Nam eget dui.
                Pellentesque ut neque. Nunc sed turpis. Donec mi odio,
                faucibus at, scelerisque quis, convallis in, nisi.
            </p> 
    </div>
    <div class="text-left pb-2 pt-2">
        <a href="#">Details...</a>
    </div>
 </div>
</div>

我的 CSS 代码。我没有更改此 Bootstrap CSS 代码:

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: .75rem;
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.text-left {
    text-align: left!important;
}
.pb-2, .py-2 {
    padding-bottom: .5rem!important;
}
.pt-2, .py-2 {
    padding-top: .5rem!important;
}

Answer 1

文本溢出

这可能对您有所帮助，您可以根据需要使用它来控制文本的溢出。

例如:

 .card-text{
    font-size:19px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

如果你想让你的网站响应你应该尝试使用 @media 规则您可以在其中根据分辨率指定确切的更改。

看看这个link对于@media 规则。

例如:-->当浏览器的宽度小于或等于 600px 时隐藏一个元素:

   @media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

希望对您有所帮助。