警报引导 v3 的下拉菜单答案

【问题标题】：Dropdown on alert bootstrap v3警报引导 v3 的下拉菜单
【发布时间】：2019-06-10 18:27:29
【问题描述】：

警报框下拉

我想在我的警报框上显示一个下拉列表。我现在拥有的：

但是当我点击它时什么都没有出现。

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="alert alert-warning row" role="alert">
  <div class="col-md-6">
    <span class="glyphicon glyphicon-info-sign" style="color: #FFA500;"></span> Conseil: La photo du produit est de mauvaise qualité, vous pouvez la modifier dans la partie 'Image et description'<br><br>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-md-6">
    <p style="text-align: center">Indice de complétion : </p>
    <div class="progress" style="width: 50%; margin-left: 25%">
      <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div><br>
    </div>
  </div>
</div>

https://ghostbin.com/paste/wfqzv

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身最好是在堆栈片段中重现它所需的最短代码。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

添加此文件

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://code.jquery.com/jquery-2.1.0.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

HTML

<div class="alert alert-warning row" role="alert">
            <div class="col-md-6">
                <span class="glyphicon glyphicon-info-sign" style="color: #FFA500;"></span> Conseil: La photo du produit est de mauvaise qualité, vous pouvez la modifier dans la partie 'Image et description'<br><br>
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <p style="text-align: center">Indice de complétion : </p>

                <div class="progress" style="width: 50%; margin-left: 25%">
                    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div><br>
                </div>
            </div>
    </div>

https://jsfiddle.net/8ype69d4/

【讨论】：