[武汉|结业弟子]JS-万晶|2019年10月22日的日报-技能树.IT修真院

发表于： 2019-10-22 22:41:58

1 1105

今天完成的事情：大体上写完任务六
明天计划的事情：任务六收尾，了解任务七相关
遇到的问题：在用bootstrap写下拉菜单按钮时，出现了下拉选项无法排成列还是而是排成一行的状态如图

代码如下：

<div class="container">
    
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
    </div>
  </div>
  </div>

多次检查对比代码之后仍无解决头绪，尝试改用li标签来重写，代码如下：

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