如何设置引导文本的大小和卡片大小答案

【问题标题】：How to set the size of the bootstrap text and card size如何设置引导文本的大小和卡片大小
【发布时间】：2018-11-07 18:43:23
【问题描述】：

我使用引导程序实现了该卡。但是我的卡片大小根据文本字符的数量而变化。详细信息链接也有所不同，当我缩小浏览器时，它会与我的卡片文本重叠。如何固定卡片文字（class：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 代码。我没有更改此引导 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;
}

【问题讨论】：

标签： css twitter-bootstrap

【解决方案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;
  }
}

希望对你有帮助。

【讨论】：