如何使用 flexbox 将所有元素放入 React-Bootstrap 卡中？答案

【问题标题】：How to fit all elements into React-Bootstrap cards with flexbox?如何使用 flexbox 将所有元素放入 React-Bootstrap 卡中？
【发布时间】：2021-11-01 05:41:40
【问题描述】：

我在反应引导程序中进行了此操作。我有由图片、一些文字和一个按钮组成的电影卡。我需要所有卡片的高度相同，但里面的数据不断溢出。它是用 bootstrap 构建的，因为它是一个训练营项目，我需要完善它。我正在尝试将 flexbox 用于卡片，但遇到了麻烦。编辑：我希望卡片保持不变，以便文本可以溢出，但它需要保持隐藏并且不显示部分文本。

我想要什么（注意文本如何被截断，没有部分文本显示）

<Card className="cardClass">
    <div style={{textAlign: 'center'}}>
       <Card.Img  className="card-image" variant="top" src={movie.ImagePath} />
    </div>
   
    <Card.Body>
      <div className="card-text-body">
        <Card.Title>{movie.Title}</Card.Title>
        <Card.Text>{movie.Genre.Name}</Card.Text>
        <Card.Text className='card-description'>{movie.Description}</Card.Text>
         <Link to={`/movies/${movie._id}`}>
          <Button className="movieCard-btn" variant="primary">View Movie</Button>
        </Link>
      </div>
    </Card.Body>
  </Card>


.card {
    margin-bottom: 4rem;
    background-color: rgb(247, 247, 247);
}

.cardClass {
  
    max-width: 100%;
    height: 400px;
}

.card-image{
    width:  100px;
    height: 150px;
    object-fit: cover;
    text-align: center;
}

.card-title {
    font-weight: 900;
}
.card-text-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.card-description {
    font-size: 13px;
    
    overflow: hidden;
}

.card-body {
    font-weight: 400;
}

.movieCard-btn {
    width: 100%;
    margin-top: 1rem;
}
.btn .btn-primary {
    text-align: center!important;
}
.btn-primary {
    color: black;
    background-color: goldenrod;
    border-color: black;
}
.btn-primary:hover {
    color: black;
    background-color: goldenrod;
    border-color: black;
}

a {
    text-decoration: none!important;
}

【问题讨论】：

电影描述文本可以变化，并使其他卡片大小不同。我建议查看 flex grow：developer.mozilla.org/en-US/docs/Web/CSS/flex-grow，这样卡片将根据最大的描述进行增长。
我希望卡片的大小保持不变。文本可以溢出，但需要保持隐藏状态，不能显示部分文本。
在这种情况下使用使用溢出：w3schools.com/css/css_overflow.asp
但随后文本被切断并显示部分文本。我发布了一张图片或我正在寻找的内容。
你只能有一行，因为你必须使用空格：没有换行属性

标签： css reactjs flexbox react-bootstrap card

【解决方案1】：

这里有两种方法：

第一

限制描述字符，例如：

let description = movie.description;    
if (description.length > 120) {
    description = description.substring(0, 120);
}

或者

卡片的高度必须为 100% 才能填满剩余空间。
您的标题设置为 flex-grow: 1，以便将所有内容向下推。

不要忘记在描述框上设置高度并溢出：隐藏；

.card {
    margin-bottom: 4rem;
    background-color: rgb(247, 247, 247);
    height: 100%;
}

.card-title {
    font-weight: 900;
    flex-grow: 1;
}
.card-description {
    font-size: 13px;

    overflow: hidden;
    height: 100px;
}

【讨论】：

不错但是底部按钮溢出