html - Bootstrap 4 下拉项看起来像好友请求

Question

我有一个 bootstrap 4 下拉列表，它应该包含好友请求记录。它的左侧有一个图像，后面是用户名，然后是接受和拒绝按钮。我想让它的风格像 facebook 的风格。问题是，当我输入不同长度的名称时，一切都变得一团糟。如果这个人的名字更长，它不会换行，而是保持在同一行。我试图在下面的评论中描述问题。正如您在 fiddle 上看到的: FirstName LastName 的名字比预期的要长，但它没有换行。但是 word-wrap: break-word 没有用。

<a class="dropdown-item" href="#">
    <!-- Here I want 3 divs.
    1st div: it should contain the image in left side exactly as it is on the fiddle
    2nd div: user's name. If the characters are longer than the div's size it should break the word on a second line.
    3rd div: Accept and Reject buttons
    The final result should be no matter what name you input, it should be getting it on a
    new line instead. When I inspect the page facebook's one has like
    3 parts (boxes) and mine is incredibly bad. 
    -->
</a>

注意:整个代码都在 fiddle 上!

https://www.bootply.com/A78wFQy1qA

Answer 1

试试这个

您可以通过将此 css white-space: normal; 添加到您的 guy's name 来解决此问题。

同时将 vertical-align: bottom; 添加到 center name。

我将一个类添加到你的人的名字元素。你可以检查代码。

这是工作代码。

.dropdown-item .user-item {
  white-space: normal;
  vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle mr-lg-2" id="contactsDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-fw fa-bell"></i>
    <span class="d-lg-none">
      Contacts
      <span class="badge badge-pill badge-warning">6 new</span>
    </span>
    <span class="indicator text-warning d-none d-lg-block">
        <i class="fa fa-fw fa-circle"></i>
    </span>
  </a>
  <div class="dropdown-menu dropdown-menu-right" style="min-width: 300px;" aria-labelledby="contactsDropdown">
    <h6 class="dropdown-header">Contacts:</h6>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
      <img src="https://orig00.deviantart.net/d7b0/f/2011/166/d/4/avatar_100x100_by_demonfox_zephz-d3iyw6a.png" class="rounded-circle" style="width: 50px; height: 50px;">
      <div class="text-left user-item" style="display: inline-block; margin-left: 10px; width: 100px;">
        FirstName LastName
      </div>
      <span class="text-right">
          <input type="button" class="btn btn-primary btn-sm" value="Accept">
          <input type="button" class="btn btn-default btn-sm" value="Reject">
      </span>
    </a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">
      <img src="https://orig00.deviantart.net/d7b0/f/2011/166/d/4/avatar_100x100_by_demonfox_zephz-d3iyw6a.png" class="rounded-circle" style="width: 50px; height: 50px;">
      <div class="text-left user-item" style="display: inline-block; margin-left: 10px; width: 100px;">
        FirstName LastName
      </div>
      <div style="display: inline-block;">
        <input type="button" class="btn btn-primary btn-sm" value="Accept">
        <input type="button" class="btn btn-default btn-sm" value="Reject">
      </div>
    </a>
  </div>
</li>