Bootstrap popover list

Question

我为我的大学制作了一个bootstrap popover的项目，并且我试图为popover添加列表。

我不知道在哪里添加此列表，您可以看到我的样本。

点击显示弹出窗口后的Select category

我需要这个列表，（看样本图片）任何人请帮我添加这个，

这是我的示例代码：

＆＃13;

＆＃13;

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group">
  <a href="#"  data-toggle="popover" data-placement="bottom" data-content="Content"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该回答你的问题。

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  });
});

.popover-title {
  text-align: center;
}

.custom-popover li {
  border: none!important;
  text-align: center;
}

.custom-popover li:nth-child(2) {
  border-top: 1px solid #ccc!important;
}

.custom-popover li:last-child {
  border-top: 1px solid #ccc!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category"><input class="form-control input-sm" id="category" type="text" placeholder="Select category">
  </a>
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>

<div class="form-group">
  <input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>

<title>Bootstrap Example</title>

<!-- loaded popover content -->
<div id="popover-content" style="display: none">
  <ul class="list-group custom-popover">
    <li class="list-group-item">Airport Pickup</li>
    <li class="list-group-item">Food and Beverage</li>
    <li class="list-group-item">Yoga Class</li>
  </ul>
</div>

根据您的偏好更改列表项。您可以在此处输入链接并根据需要设置列表样式。这应该给你一个关于如何做的基本想法。