Jquery 将引导下拉列表宽度设置为容器

我有一个左边是

260px

宽，右边是

260px

宽。我的中心div是流体

100%

width

单击右箭头/center div，我希望有一个与center div容器宽度相同的

下拉列表。下面是我的代码和
fiddle

<div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">    
   <div class="row">
    <div class="leftBox pull-left" href="#">
      <img src="//placehold.it/258x58">
    </div>
    <div class="rightBox pull-right" href="#">
      Right Div
    </div>
     <div class="centerBox">
       <ul class="nav pull-right">
          <li class="dropdown" id="menuLogin">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown" id="navLogin">
              <b class="glyphicon glyphicon-chevron-down"></b></a>
              <div class="dropdown-menu">
                <form class="form" id="formLogin"> 
                  <input name="username" id="username" placeholder="Username" type="text"> 
                  <input name="password" id="password" placeholder="Password" type="password"><br>
                  <button type="button" id="btnLogin" class="btn">Login</button>
                </form>
            </div>
          </li>
        </ul>
    </div>
  </div>
</div>
</div> 


右分区




登录



为什么不使用，而不是左右浮动列

有了网格，你可以做这样的事情

<div class="container">
    <div class="row">
        <div class="col-sm-3 width-260">
            <!-- left box goes here -->
        </div>

        <div class="col-sm-6">
            <!-- centre box goes here -->
        </div>

        <div class="col-sm-3 width-260">
            <!-- right box goes here -->
        </div>
    </div>
</div>

这里是一个基于jQuery的解决方案，它计算中心框的
宽度
（在
加载
和调整窗口大小期间），然后将
宽度
分配给登录框，并根据需要对其进行定位

注意：有关步骤的解释，请参阅内联注释

$(document).ready(function(){
  var cntrboxWidth = $('#centerBox').width()-520; // Width of center box minus width of the two side boxez
  $('#navLogin + .dropdown-menu').width(cntrboxWidth); // Setting the width of Login box
  var extraWidth = $('#navLogin').outerWidth(); // Getting the width of the arrow icon box to adjust position
  $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth); // Positioning the login box

  $(window).resize(function(){ // Adjusting position and size upon resizing window.
    cntrboxWidth = $('#centerBox').width()-520;
    $('#navLogin + .dropdown-menu').width(cntrboxWidth);
    extraWidth = $('#navLogin').outerWidth();
    $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth); 
  });

});


编辑：要将登录框精确定位在菜单下方，请使用下面的CSS。它不需要是动态的，因为根据CSS，您的菜单栏有一个固定的高度（60px）

.dropdown-menu{
    top: 60px; // Equal to the height of the menu
}

您想只使用CSS还是可以使用Javascript/jQuery？既然您已经标记了jQuery，我可以假设您对jQuery解决方案没有意见吗？@Harry:我正在考虑如何使下拉菜单的宽度等于中心div容器的宽度。我可以接受任何解决方案。谢谢亨利，你能帮助我在网格系统就位的情况下，将左右列调整到260px，将中心调整到100%宽度吗。再次感谢。请参阅我的更新。还要注意，我在每一列（左侧和右侧）中添加了一个
width-260
类。默认情况下，中柱应该是流动的。再次感谢Harry，您能否使下拉列表的“开始”与菜单的“结束”精确对齐。上面有点重叠。。。如图所示。再次感谢Harry，最后一个问题。。。你认为我要做的布局是正确的还是应该继续使用基于网格的系统进行更改。如果可能的话，我们可以在不使用jQuery的情况下使用css实现同样的效果吗？考虑到宽度计算和动态定位，这可能是可能的，但很难做到。@theJava:我想你指的是箭头按钮。因为第一条线是一个街区，所以它走了一条线。为了使两者在同一行中，需要将其设为内联块。检查。我已经在CSS中添加了最后两行用于定位。但我认为也许是时候让你从任何使用过bootstrap的人那里得到一些专家的建议，看看是否有其他内置设计来解决这些问题。（注意：我已经删除了过去的一些评论，以缩短conv）。
.dropdown-menu{
    top: 60px; // Equal to the height of the menu
}