應用引導電網根據需要

-1

http://image.prntscr.com/image/8ac174952706418d94904347d4bf3be2.png

這裏是我到目前爲止已經試過，

<ul class="list-group" style="margin:20px"> 

    <li class="list-group-item"> 
    <a href="#" class="row"> 
     <span class="col-md-10" style="font-size: 16px;">Item 1</span> 
     <span class="col-md-1 glyphicon glyphicon-arrow-right"></span> 
     <span class="pull-right btn-group col-md-1"> 
     <button class="btn btn-xs btn-info">Edit</button> 
     <button class="btn btn-xs btn-warning">Delete</button> 
    </span> 
    </a> 
    </li> 

    <li class="list-group-item"> 
    <a href="#" class="row"> 
     <span class="col-md-10" style="font-size: 16px;">Item 2</span> 
     <span class="col-md-1 glyphicon glyphicon-arrow-right"></span> 
     <span class="pull-right btn-group col-md-1"> 
     <button class="btn btn-xs btn-info">Edit</button> 
     <button class="btn btn-xs btn-warning">Delete</button> 
    </span> 
    </a> 
    </li> 
</ul>

小提琴：http://jsfiddle.net/EpG7x/524/

問題

無法使引導網格工作
不知道如何通過移動我的編輯使用引導網格/從「A」標記刪除按鈕
不知道怎麼加滿我的按鈕組左側的高度邊框爲list-group-item has/* padding：10px 15px; * /我不想鬆動

來源

2016-08-01 Mathematics

你爲什麼把一個提交鏈接內的按鈕？ – Quentin

@Quentin這不是必需的，他們會有自己的點擊事件，我很樂意將它們從「a」中取出 - 我認爲這將是最好的 – Mathematics

由於HTML不允許按鈕成爲主播：是的。 – Quentin

是你想要的嗎？

只包裝文本的錨標籤。

.list-group-item .col-xs-8 ,.list-group-item .col-xs-4, 
 
.list-group-item .col-md-8 ,.list-group-item .col-md-4{ 
 
    border:1px solid gray; 
 
    height:100%; 
 
    padding: 10px 15px; 
 
} 
 

 
.list-group-item,.row{ 
 
    padding:0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="list-group" style="margin:20px"> 
 
    <li class="list-group-item row"> 
 
    <a href="#" class=""> 
 
     <span class="pull-left col-md-8 col-xs-8"> 
 
     <span class="col-md-10" style="font-size: 16px;">Item 1</span> 
 
     <span class="col-md-1 pull-right glyphicon glyphicon-arrow-right"></span> 
 
     </span> 
 
    </a> 
 
    <span class="pull-right btn-group col-md-4 col-xs-4"> 
 
     <button class="btn btn-xs btn-info">Edit</button> 
 
     <button class="btn btn-xs btn-warning">Delete</button> 
 
    </span> 
 

 
    </li> 
 

 
    <li class="list-group-item row"> 
 
    <a href="#" class=""> 
 
     <span class="pull-left col-md-8 col-xs-8"> 
 
     <span class="col-md-10" style="font-size: 16px;">Item 2</span> 
 
     <span class="col-md-1 pull-right glyphicon glyphicon-arrow-right"></span> 
 
     </span> 
 
    </a> 
 
    
 
    <span class="pull-right btn-group col-md-4 col-xs-4"> 
 
     <button class="btn btn-xs btn-info">Edit</button> 
 
     <button class="btn btn-xs btn-warning">Delete</button> 
 
    </span> 
 

 
    </li> 
 
</ul>

來源

2016-08-01 10:55:37 Sankar

應用引導電網根據需要

回答

相關問題