Bootstrap 弹出框样式问题

Question

我做引导popover，我有一些问题，ly 列表是内联的，我不想显示内联列表，看看我的 2 张图片你可以理解它 FIDDLE 我的code part 不工作，但fiddle 工作发生了什么？ 图片 01- 我需要这样的

实际上是我当前的工作示例

html

  <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>
  <div class="form-group">
    <input class="form-control input-sm" id="Paidby" type="text" placeholder="Paid by">
  </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>

css

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    line-break: auto;
}
.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;
}

js

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

如何制作这样的图片01，请帮我解决这个问题

Answer 1

行高应以 px 为单位。尝试为 li elementy 指定宽度，因为默认情况下它们尽可能小，因此其中三个可以放在一行中