css 如何在Bootstrap中为相同的12个长列中的元素设置相同的高度？

64jmpszr 于 2023-03-09 发布在 Bootstrap

关注(0)|答案(1)|浏览(123)

我有这个html：

<div class="row">
    <div class="col-lg-6 form-box-item">
        <p>long long long long long long long long long long long</p>
        <select class="input-select"><option>Nem</option><option>Igen</option><option> </option></select>
    </div>
    <div class="col-lg-6 form-box-item">
        <p>short 2</p>
        <select class="input-select"><option>igen</option><option> </option></select>
    </div>
    <div class="col-lg-6 form-box-item">
        <p>short 3</span></p>
        <select class="input-select"><option>Nem</option><option>Igen</option><option> </option></select>
    </div>
    <div class="col-lg-6 form-box-item">
        <p>short 4</p>
        <select class="input-select"><option>igen</option><option> </option></select>
    </div>
</div>

在桌面上，1-2进入第一个“视觉行”，3-4进入第二个。
如何使short 2与long long long long long long long long long long long的高度相同？
如何使short 3和short 4保持相同的高度？
我试着用row设置align-items-stretch，但它不影响子元素。

css

来源：https://stackoverflow.com/questions/75669218/how-to-set-same-height-for-element-in-same-12-long-columns-in-bootstrap

1条答案

按热度按时间

dzhpxtsq1#

认为text-overflow: ellipsis;将是一个适合您的解决方案。请将它与line-clamp一起使用。
例如，

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

这将停止后，3行。并给予固定高度/最大高度，如果需要。
如果你真的需要显示全文，试试CSS overflow-y Property来保持高度。

赞(0）回复(0）举报 2023-03-09

我来回答

css 如何在Bootstrap中为相同的12个长列中的元素设置相同的高度？

1条答案

相关问题

热门标签

最新问答