第五章垂直按钮分组问题

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="btn-group-vertical">

  <button class="btn btn-default" type="button">首页</button>

  <button class="btn btn-default" type="button">产品展示</button>

  <button class="btn btn-default" type="button">案例分析</button>

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

<div class="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>

  <button class="btn btn-default" type="button">案例分析</button>

  <button class="btn btn-default" type="button">联系我们</button>

  <button class="btn btn-default" type="button">关于我们</button>

</div>

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

</html>

除了添加<br>外,怎么才能使两个按钮组上下排列而不是左右排列(如图)使用清除浮动也没有效果。http://img.mukewang.com/5738a72a0001300301520390.jpg

云淡风轻的天空
浏览 1250回答 2
2回答

李晓健

display:block
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Bootstrap