Question

我正在尝试制作自定义下拉菜单。我有了一个主意。它需要看起来像这样：

但相反它看起来像这样：

老实说，我无法弄清楚为什么会这样。我尝试使用列，但这并不适用于下拉列表。我拼命寻找答案。这是HTML代码，我无法在代码段中使用它，很抱歉。

agent { dockerfile { dir 'path-to-Dockerfile' } }

提前致谢！

Answer 1

我认为你应该操纵＆lt; p>在下面的CSS中标记

p{
	display:inline-block;
    width:200px;
    position: relative;
    word-break: break-all;
	white-space:normal;
}

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>

<body>
<li class="nav-item dropdown icondropdown">
  <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="badge badge-danger badge-custom">1</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1 " aria-labelledby="navbarDropdown" style="width: 350px; border-radius: 7px; padding-bottom: 0">
    <a class="dropdown-item text-center">
      <h5>Inbox</h5><span class="badge badge-danger badge-custom2">1</span></a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      
	  <div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Rainier laan</b> heeft gereageert op je bericht.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
	<div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Johan Strootman</b> heeft je bericht geliked.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
    <a class="dropdown-item dropdown-item-style" href="#">
      
	  <div class='row'><div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" class="rounded-circle" width="50" height="50"></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
      <p style="color: grey; word-wrap: break-word"><b style="color: grey">Bill Gates</b> heeft gereageert op je bericht.</p>
	  </div></div>
    </a>
    <div class="dropdown-divider m-0"></div>
  </div>
</li>
</body>
</html>

Answer 2

.dropdown-menu有一个名为white-space的属性：nowrap;你只需要删除它。

这是默认的boostrap样式。

.dropdown-item {
    display: block;
    width: 100%;
    padding: 3px 1.5rem;
    clear: both;
    font-weight: 400;
    color: #292b2c;
    text-align: inherit;
    white-space: nowrap;
    background: 0 0;
    border: 0;
}

这是新风格。

.dropdown-item {
        display: block;
        width: 100%;
        padding: 3px 1.5rem;
        clear: both;
        font-weight: 400;
        color: #292b2c;
        text-align: inherit;
        background: 0 0;
        border: 0;
    }

通过这些更改，您将解决问题。

Bootstrap 4自定义下拉对齐

2 个答案: