如何使用引导带在列表项之间添加间隙并使它们具有相同的长度

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 developer工具，可以看到应用的样式表。

Answer 1

您可以通过添加一些CSS来执行此操作：

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

Answer 2

你可以使用堆积的导航丸。

＆＃13;

＆＃13;

.btn-outline{
width:100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills nav-stacked">
    <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>

＆＃13;

＆＃13;

＆＃13;

听起来可能不对，可能不适合这个。但是这个解决方案需要更少的css变化和很可能不会影响辅助功能。