Question

在下面的代码中，我在容器div中有一个链接，该链接控制一个bootstrap下拉菜单。现在，下拉菜单与下拉链接本身对齐。如何更改下拉菜单的位置，使其与链接的父div对齐，并且它与父div具有相同的宽度？就像父div是下拉按钮一样。

  <build>
    ...
      <plugins>
        <plugin>
          <groupId>org.apache.maven.plugins</groupId>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.6.0</version>
          <configuration>
            <source>1.8</source>
            <target>1.8</target>
          </configuration>
        </plugin>  
      </plugins>    
  </build>

以下是代码的演示： demo

Answer 1

添加此css：

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

Answer 2

使用 margin 属性移动下拉列表ul和宽度，检查下拉列表的填充和最小宽度。尝试在浏览器中调整它们。

＆＃13;

   $( 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;

   });

＆＃13;

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

＆＃13;

<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;
												     background:linear-gradient(to right, #85e2f0 5% , white 95%);">
													<div class="col-xs-2" style="height:45px; font-size: 28px;">
														<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
													</div>
														
													<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>
														
													<div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;">
														<a data-toggle="dropdown">
                   	<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>
													</div>
												</div>

＆＃13;

Answer 3

你必须制作div.open＆＃39; col-xs-12＆＃39;而是col-xs-2并添加这个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;
}

如何使drop对齐其父div

3 个答案: