Question

我有一个bootstrap 4下拉列表，它应该包含好友请求记录。它左侧有一个图像，后面是用户名，然后是“接受”和“拒绝”按钮。我想让它的风格像facebook一样。问题是当我输入不同长度的名字时，一切都变得混乱。如果这个人的名字更长，而不是在一条新线上，那么它就会停留在同一条线上。我试着在下面的评论中描述这个问题。正如您在小提琴上看到的那样：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>

注意：整个代码都在小提琴上！

https://www.bootply.com/A78wFQy1qA

Answer 1

试试这个

您可以通过将此css white-space: normal;添加到guy's name。

来解决此问题

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

我添加class to your guy's name element。您可以查看代码。

以下是工作代码。

.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>

Bootstrap 4下拉项看起来像朋友请求

1 个答案: