html - 如何使用 Bootstrap 带在列表项之间添加间隙并使它们长度相等

Question

我有以下代码，

<ul id="lstproducts" class="list-unstyled">
    <li draggable="true"><button class="btn btn-outline btn-danger">Dragabl1</button></li>
    <li draggable="true"><button class="btn btn-outline btn-danger">Drabl1</button></li>
    <li draggable="true"><button class="btn btn-outline btn-danger">D1 </button></li>
    <li draggable="true"><button class="btn btn-outline btn-danger">Drl1 Jumpets Expanda</button></li>
 </ul>

输出看起来像这样:

现在我该怎么做:
1.让所有按钮的长度相同。
2. 添加列表项之间的间距。

添加后更新

.list-unstyled li{
  width: 300px; 
  margin-bottom: 5px; 
}

我仍然得到相同的结果。检查 chrome 开发者工具，可以看到应用的样式表。

Answer 1

您可以通过添加一些 CSS 来做到这一点，例如:

.list-unstyled li{
  width: 300px; 
  margin-bottom: 5px; 
}