                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /玩转Bootstrap（基础）

问题：相邻按钮都有下拉列表，这两个相邻按钮会水平排列

问题：当引用了垂直分布样式之后，如果相邻的两个按钮都有下拉列表，那么这两个相邻按钮就水平排列在了一行；方法：这两个相邻按钮必须在外面加一个容器：列名为“.btn-toolbar” ；作用：给这两个按钮清楚浮动；

草莓部落

2016-07-07

源自：玩转Bootstrap（基础） 5-10

关注问题我要回答

929

操作

收起

2 回答

草莓部落提问者
2016-07-08

我是自问自答~我的代码写完之后并不是垂直排列~

0 回复有任何疑惑可以回复我~

收起回答

哥很温柔
2016-07-07

没看懂你是提问，还是自问自答。

下拉表单垂直分布是OK的，并未出现水平排列

<div class="btn-group btn-group-vertical">
  <button class="btn btn-default" type="button">首页</button>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span 
class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a href="##">收割机</a></li>
        <li><a href="##">电动机</a></li>
    	<li><a href="##">拖拉机</a></li>
    	<li><a href="##">电动车</a></li>
    </ul>
  </div>
  <div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span 
class="caret"></span></button>
    <ul class="dropdown-menu">
    	<li><a href="##">公司简介</a></li>
    	<li><a href="##">企业文化</a></li>
    	<li><a href="##">组织结构</a></li>
    	<li><a href="##">客服服务</a></li>
    </ul>
  </div>
    <button class="btn btn-default" type="button">案例分析</button>
  <button class="btn btn-default" type="button">联系我们</button>
</div>