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

Posted 2023-03-28

【中文标题】如何使用 flexbox 将所有元素放入 React-Bootstrap 卡中？

【英文标题】：How to fit all elements into React-Bootstrap cards with flexbox?

【发布时间】：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

但随后文本被切断并显示部分文本。我发布了一张图片或我正在寻找的内容。

你只能有一行，因为你必须使用空格：没有换行属性

【参考方案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;

【讨论】：

不错但是底部按钮溢出