Bootstrap popover样式问题

Question

我制作bootstrap popover，我有一些问题，列表是内联的，我不想显示内联列表，看看我的2张图片你可以理解它 FIDDLE code part我的fiddle无效，但 <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> 正在发生什么？ 图片01-我需要这样

实际上是我当前的工作样本

HTML

.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;
}

CSS

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

JS

import numpy as np

a= np.array([[1,2,3,0,9],[3,2,6,2,7],[0,0,0,8,0],[1,0,0,0,3]])
a + a[1]

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

Answer 1

行高应以px给出。尝试也为li elementy指定宽度，因为默认情况下它们尽可能小，因此其中三个适合一行