在 bootstrap 网格中为 div 赋予宽度

Question

我正在创建一个收件箱页面，需要为日期列提供宽度，以便它可以显示内联而不是分词。

我试过 white-space: nowrap 但由于宽度溢出隐藏了它。

我想要名称 class 和日期 class 像这样显示内联宽度等于宽度。

用户名，（结束日期）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

添加 inline-block 作为名称和日期容器的显示，然后特别是日期不换行。

$(".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>

在 bootstrap 网格中为 div 赋予宽度

Giving width to div in bootstrap grid

html

javascript

css

bootstrap-5