点击下拉栏时，只有在文字区域才有效。空白区域无法下拉

截图

图一.是问题图》》》》》 。。。。。。》》》》》》》图二是正常图》》》》》》》》》》图片三.显示a标签未设置样式时的内容区域。

代码

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul>
                    <li class="dropdown dropdown-menu-left text-center">
                        <a href="#" class="dropdown-toggle  text-center" data-toggle="dropdown">
                            所在地
                            <b class="caret btn-large triangle"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">北京</a></li>
                            <li><a href="#">上海</a></li>
                            <li><a href="#">广州</a></li>
                            <li><a href="#">福州</a></li>
                            <li><a href="#">厦门</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

原因在于，a标签内容区域，在未设置样式时是由内容撑开的。

解决方法：a添加btn-block属性，bootstrap规定其宽度等于父元素。

[上海分院|内门弟子] JS-周能

你触发下拉框是用a标签来触发的下拉框，所以只有点击文字才会显示下拉框，点击空白处没有作用，这里的话可以用父元素来触发下拉框列表，比如用你的最外层的div元素来触发下拉宽列表，这样不管点击文字还是空白区域都可以触发下拉类表

成都分院|内门弟子] JS-李文龙

如果你是用a标签来触发悬停效果，那肯定是只有a标签的范围内才会有效，一个方法就是让它表现为块级元素，再让其大小等于父级元素，还有一个方法就是让父级元素来触发悬停效果