设置引导下拉菜单宽度等于容器

Question

我的左边是260px 宽，右边是260px 宽。我的中心 div 是流动的 100% 宽度。

点击右箭头/中心 div，我想要一个与中心 div 容器宽度相同的dropdown。下面是我的代码和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> 

http://www.bootply.com/82O0SgmP8p

Answer 1

这是一个基于 jQuery 的解决方案，它计算中心框的 width（在 load 和窗口大小调整期间），然后将 width 分配给登录框并根据需要定位它。

注意：请参阅 cmets inline 以了解这些步骤。

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

});

Demo

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

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

Answer 2

为什么不使用grid system 而不是左右浮动列？

使用网格你可以做这样的事情

<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>

然后将您的下拉菜单放在中心栏中。以这种方式设置样式会容易得多（即，将其设为包含元素的width: 100% 等）。

您所要做的就是添加一些自定义样式，以确保左右列固定在260px

更新：要使左右两列的宽度为 260px，请将其添加到您的样式表中：

.width-260 {
    width: 260px;
}