ブートストラップ4カスタムドロップダウンアライメント

私はカスタムドロップダウンメニューを作ろうとしています。そして私は考えを得た。このような場合は、なぜ私は正直に把握することはできませんブートストラップ4カスタムドロップダウンアライメント

：

しかし、その代わりに、それはそれはこのように見てしまった：それは一種の、このように見える必要があります。私は列を使用しようとしましたが、実際にはドロップダウンでは機能しません。私は必死に答えを探しています。これはHTMLコードですが、スニペットで動作させることができませんでした。申し訳ありません。

<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: 300px; 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="#"> 
     <img src="img/foto.jpg" class="rounded-circle" width="42"> 
     <p style="color: grey; word-wrap: break-word"><b style="color: grey">Rainier laan</b> heeft gereageert op je bericht.</p> 
    </a> 
    <div class="dropdown-divider m-0"></div> 
    <a class="dropdown-item dropdown-item-style" href="#"> 
     <img src="img/johan.jpg" class="rounded-circle" width="42"> 
     <p style="color: grey; word-wrap: break-word"><b style="color: grey">Johan Strootman</b> heeft je bericht geliked.</p> 
    </a> 
    <div class="dropdown-divider m-0"></div> 
    <a class="dropdown-item dropdown-item-style" href="#"> 
     <img src="img/lil-bub.jpg" class="rounded-circle" width="42"> 
     <p style="color: grey; word-wrap: break-word"><b style="color: grey">Bill Gates</b> heeft gereageert op je bericht.</p> 
    </a> 
    <div class="dropdown-divider m-0"></div> 
    </div> 
</li>

ありがとうございます！

出典

2017-10-27 Rainier laan

.dropdown-menuには、white-space：nowrapというプロパティがあります。あなたはそれを削除する必要があります。

これはデフォルトのブーストラップスタイルです。

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

この変更により、問題を解決します。

出典

2017-10-27 18:22:55

、以下のようにCSSで< p>タグを操作するべきだと思います。私のために背景をクリアするだけです –

私はあなたが

何もしません残念ながら

p{ 
 
\t display:inline-block; 
 
    width:200px; 
 
    position: relative; 
 
    word-break: break-all; 
 
\t 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="#"> 
 
     
 
\t <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> 
 
\t </div></div> 
 
    </a> 
 
    <div class="dropdown-divider m-0"></div> 
 
    <a class="dropdown-item dropdown-item-style" href="#"> 
 
\t <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> 
 
\t </div></div> 
 
    </a> 
 
    <div class="dropdown-divider m-0"></div> 
 
    <a class="dropdown-item dropdown-item-style" href="#"> 
 
     
 
\t <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> 
 
\t </div></div> 
 
    </a> 
 
    <div class="dropdown-divider m-0"></div> 
 
    </div> 
 
</li> 
 
</body> 
 
</html>

出典

2017-10-27 18:42:25

ブートストラップ4カスタムドロップダウンアライメント

答えて

関連する問題