右边有关闭按钮的Bootstrap列表

Question

我正在尝试用引导程序绘制一些元素，但是我被卡住了，我需要一点帮助才能看到我如何解决这个问题。 我的问题与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

HTML：

<div class="container">
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item list-group-button-right">
                <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>
</div>

CSS：

body {
    padding:40px;
}
.list-group-button-right {
    position: relative;
}
.list-group-button-right button {

    position: absolute;
    top: 10px;
    right: 15px;
    height: 82px;
}

JSFiddle demo

Answer 2

我知道这不是完美或最好的方法，但这可以帮助你http://jsfiddle.net/ZurAk/232/

<div class="container">

     <div class="form-group">
        <div class="input-group">
        <input type="search" class="form-control" name="searchBy" id="searchBy"/>
        <input type="search"  class="form-control" name="searchBy" id="searchBy"/>
        <span class="input-group-btn">
            <button id="filter" class="btn btn-primary" style="height:4.85em;">Close Button</button>
        </span>
        </div>
     </div>
</div>

Answer 3

我必须在你的标记中添加几个类。请注意它如何使用不同的浏览器宽度正确缩放。

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

Answer 4

这是半定制构建，半引导， 见：http://jsfiddle.net/bb7pbuqx/2/

HTML：

<div id="outer_container"  class="container">
    <div id="inner_container" class="container">
        <div id="list_container" class="container">
            <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>
                <li class="list-group-item items-blue">This is option two from pair one</li>
                <li class="list-group-item items-blue">This is option two from pair one</li>
            </ul>
        </div>
        <div id="button_container" class="container">            
            <button id="button" class="btn btn-sm btn-danger" type="button">Close Button</button>
        </div>
    </div>
</div>

的CSS：

body{padding:40px;}

#outer_container
{
    position:relative;
}

#list_container
{
    float:left;
    display:inline-block;
    height:100%;
    padding:0;
    margin:0;

}
    #list_container ul
    {
        margin:0 ;
        padding:0 ;

    }
    #list_container li
    {
        border-top-right-radius:0px;    
        border-bottom-right-radius:0px;
    }


#button_container
{
    float:right;
    display:inline-block;
    position:absolute;
    height:100%;
}
    #button_container button
    {
        position:absolute;
        height:100%;
        left:0;

        border-top-left-radius:0px;   
        border-bottom-left-radius:0px;
    }