Bootstrap list with close button on right

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> 

так как я могу поставить эту кнопку внизу справа в продолжение Lī элементов, как на рисунке ниже:

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

Answer 2

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 3

Я знаю, что не является совершенным или лучшим способом сделать это, но это может помочь вам немного 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 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; 
    }