应用引导电网根据需要

-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

应用引导电网根据需要

回答

相关问题