div内的Bootstrap触发器Dropdown给出错误答案

【问题标题】：Bootstrap trigger Dropdown inside a div give an errordiv内的Bootstrap触发器Dropdown给出错误
【发布时间】：2019-09-02 17:39:53
【问题描述】：

我使用 React JS，我想触发一个下拉菜单，而下拉菜单位于 div className="row" 中。如果我像这样将数据切换和数据目标放在 div 中：

             <div className="row">
                  <div
                    className="col-lg-6"
                    id="dropdownMenuButton"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                      <div className="times">
                        <span className="dot" />
                        <span className="dot" />
                        <span className="dot" />
                      </div>
                  </div>
                </div>

它给出了这个错误：

TypeError: Cannot read property 'setAttribute' of null

但是，如果我将 data-toggle 放在 className="row" 中，它可以工作，但这不是我想要的，因为触发器长度将与“row”宽度一样长。

【问题讨论】：

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

在行内添加一个col-2 div 并将切换按钮放在那里。使用fontawesome图标在按钮内创建三个条形图标。

<div class="row">
    <div class="col-2">
        <div class="dropdown">
          <button class="btn btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fas fa-bars"></i>
          </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
    </div>
</div>

【讨论】：