在引導網格中為 div 賦予寬度

Question

我正在創建一個收件箱頁面，並且需要為日期列提供寬度，以便它可以顯示內聯而不是分詞。

我嘗試了 white-space: nowrap 但由於寬度而溢出隱藏它。

我希望名稱類和日期類像這樣顯示內聯寬度等於寬度。

用戶名，（結束日期）2 年 5 小時 30 分 25 秒前

這是代碼：

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom p-3"> <div class="thumbnail me-3"> N </div> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 30 min, 25 sec ago </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

添加了內聯塊作為名稱和日期容器上的顯示，然后特別是在日期上不換行。

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { display: inline-block; align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { display: inline-block; white-space: nowrap; justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom p-3"> <div class="thumbnail me-3"> N </div> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 30 min, 25 sec ago </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

實現適應長約會的行為。 您需要更改 HTML 結構，如下所示。

<div class="d-flex align-items-center justify-content-between">
    <div class="name h5 m-0">
      No One
    </div>
    <div class="ago-time small">
      2 years 5 hours 30 min, 25 sec ago
    </div>
</div>

通過將標題和日期包裝到一個彈性容器中，並在屬性之間進行對齊。 jsfiddle 。

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom px-2"> <div class="thumbnail me-3"> N </div> <div class="d-flex align-items-center justify-content-between"> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 2 years 5 hours 30 min, 25 sec ago </div> </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>