親divにドロップアラインメントを行う方法

以下のコードでは、コンテナdiv内にリンクがあり、そのリンクはブートストラップドロップダウンメニューを制御します。ドロップダウンメニューは、ドロップダウンリンク自体にアライメントされています。ドロップダウンメニューの位置を変更してリンクの親divに揃え、親divと同じ幅にするにはどうすればよいですか？親divのようにドロップダウンボタンがあります。ここで親divにドロップアラインメントを行う方法

<!doctype html> 
 
<html> 
 
</head> 
 
<body> 
 
    <div class="widget-body" style="border: solid 1px black; height:45px; margin-bottom:10px;margin-right:20px;background:linear-gradient(to right, #85e2f0 5% , white 95%);"> 
 
    <div class="col-xs-2" style="height:45px; font-size: 28px;"> 
 
\t <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
    </div> \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <div class="col-xs-8" style="height:30px;text-align:center; border: solid 1px black;margin-top: 6px; display: flex; align-items: center;justify-content: center; background-color: #42d442;">test</div> \t \t \t \t \t \t \t \t \t \t \t \t 
 
    <div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;"> 
 
\t <a data-toggle="dropdown"> 
 
     <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> 
 
    </a> 
 
    <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Another item</a></li> 
 
     <li><a href="#">This is a longer item that will not fit properly</a></li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

コードのデモです： demo

出典

2016-12-23 de li

親クラスに配置したいのですか？ –

クラスwidget-bodyを持つ外側のdiv –

'.widget-body'の相対位置と' .col-xs-2 open'クラスの位置をstaticの位置にしてから、ドロップダウンは親divに固定されます –

：

.widget-body { 
     position: relative; 
    } 
    .widget-body .col-xs-2.open { 
     position: static; 
    } 
    .widget-body ul.dropdown-menu { 
     right: 0; 
    }

出典

2016-12-23 07:51:34

これは動作しますが、ありがとう！ –

使用ドロップダウンULを移動し、幅のために、パディングとドロップダウンULの最小幅をチェックする属性マージン。ブラウザで調整してみてください。

$(document.body).on('click', '.dropdown-menu li', function(event) { var $target = $(event.currentTarget); $target.closest('.btn-group') .find('[data-bind="label"]').text($target.text()) .end() .children('.dropdown-toggle').dropdown('toggle'); return false; });

.btn-input { display: block; } .btn-input .btn.form-control { text-align: left; } .btn-input .btn.form-control span:first-child { left: 10px; overflow: hidden; position: absolute; right: 25px; } .btn-input .btn.form-control .caret { margin-top: -1px; position: absolute; right: 10px; top: 50%; }

<head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <div class="widget-body" style="border: solid 1px black; height:45px; margin-bottom:10px;margin-right:20px; \t \t \t \t \t \t \t \t \t \t \t \t background:linear-gradient(to right, #85e2f0 5% , white 95%);"> \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-xs-2" style="height:45px; font-size: 28px;"> \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-search" aria-hidden="true"></span> \t \t \t \t \t \t \t \t \t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-xs-8" style="height:30px;text-align:center; border: solid 1px black; \t \t \t \t \t \t \t \t \t \t \t \t \t margin-top: 6px; display: flex; align-items: center; \t \t \t \t \t \t \t \t \t \t \t \t \t justify-content: center; background-color: #42d442;"> \t \t \t \t \t \t \t \t \t \t \t \t \t \t test \t \t \t \t \t \t \t \t \t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;"> \t \t \t \t \t \t \t \t \t \t \t \t \t \t <a data-toggle="dropdown"> \t <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> </a> <ul class="dropdown-menu" style="margin-left:-400%; padding:0;min-width:260px;" role="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Another item</a></li> <li><a href="#">This is a longer item that will not fit properly</a></li> </ul> \t \t \t \t \t \t \t \t \t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t \t \t \t </div>

出典

2016-12-23 07:50:48

あなたは、2-COL-XSむしろdiv.open 'COL-XS-12' を作成し、このCSSを追加する必要があります。このCSSを追加

.open a{ 
    display: inline-block; 
    position: absolute; 
    top: -42px; 
    right: 12px; 
} 

.dropdown-menu { 
    position: absolute; 
    left: 0; 
    z-index: 1000; 
    display: none; 
    float: left; 
    min-width: 160px; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    font-size: 14px; 
    text-align: left; 
    list-style: none; 
    background-color: #fff; 
    -webkit-background-clip: padding-box; 
    background-clip: padding-box; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0,0,0,.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    box-shadow: 0 6px 12px rgba(0,0,0,.175); 
    width: 100%; 
    top: 0; 
}

出典

2016-12-23 07:51:07 Taniya

親divにドロップアラインメントを行う方法

答えて

関連する問題