关于制作按钮下拉菜单全宽度的问题

Question

你能看一下这个演示，让我知道为什么我无法用.dropdown-menu百分比改变？

请在全屏测试代码

＆＃13;

＆＃13;

jQuery(document).ready(function(){
    $(".btn-group").hover(
        function() { $('.dropdown-menu', this).stop().fadeIn("slow");
        },
        function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
});

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.dropdown-menu {
  min-width:700px;
  width:100% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" >
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将100％的宽度添加到课程 btn-group 将此添加到您的CSS：

.btn-group {
    width: 100%;
}

如果您希望按钮也跨越整个宽度，则将宽度100％添加到按钮。

.btn-group button {
    width: 100%;
}

＆＃13;

＆＃13;

jQuery(document).ready(function(){
    $(".btn-group").hover(
        function() { $('.dropdown-menu', this).stop().fadeIn("slow");
        },
        function() { $('.dropdown-menu', this).stop().fadeOut("fast");
    });
});

＆＃13;

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.dropdown-menu {
  min-width:700px;
  width:100% !important;
}
.btn-group {
  width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" >
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
  </div>

＆＃13;

＆＃13;

＆＃13;