时间戳

首页 > 解决方案 > Dropdown on alert bootstrap v3

html - Dropdown on alert bootstrap v3

问题描述

Dropdown on alert box

I wanted to display a dropdown on my alert box. What I have now: enter image description here

But nothing appears when I click on it.

This is my code:

<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

标签： htmlcsstwitter-bootstraptwitter-bootstrap-3

解决方案

添加此文件

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/

推荐阅读