时间戳

首页 > 解决方案 > 如何设置引导文本的大小和卡片大小

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

问题描述

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

标签： csstwitter-bootstrap

解决方案

文本溢出

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

例如：

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

如果您希望使您的网站具有响应性，您应该尝试使用@media规则，您可以在其中根据分辨率指定确切的更改。

查看@media 规则的此链接。

例如： -->当浏览器的宽度为 600px 或更少时隐藏元素：

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

我希望这可以帮助你。

推荐阅读