jquery - 右侧带有关闭按钮的 Bootstrap 列表

Question

我正在尝试使用 bootstrap 绘制一些元素，但我卡住了，我需要一点帮助来了解如何解决这个问题。 我的问题与 html 方案密切相关，看起来像:

<div class="container">
    <ul class="list-group">
        <li class="list-group-item">
        <ul class="list-group">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
        <button class="btn btn-sm btn-danger" type="button">Close Button</button>
        </li>
    </ul>
</div>

所以我怎样才能把那个按钮从下到右放在 li 元素的延续中，如下图所示:

fiddle:

Answer 1

我不得不在您的标记中添加一些类。请注意它如何根据不同的浏览器宽度正确缩放。

http://jsfiddle.net/NateW/ZurAk/233/

HTML:

<div class="container">
<div class="container">
    <ul class="list-group">
        <li class="list-group-item custom">
        <ul class="list-group options">
            <li class="list-group-item items-orange">This is option one from pair one</li>
            <li class="list-group-item items-blue">This is option two from pair one</li>
        </ul>
            <button class="btn btn-sm btn-danger side-btn" type="button">Close Button</button>
        </li>
    </ul>
</div>
</div>

CSS:

body{padding:40px;}
li.list-group-item {
    overflow:auto;
}
.side-btn{
    float:left;
    width:15%;
    white-space: normal;
    position: absolute;
    top:10px;
    bottom: 30px;
}
li.custom {
    padding:0;
}
ul.options {
    width: 85%;
    float: left;
    padding: 10px 0px 10px 15px;
}