Question

这就是我想要实现的目标，

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/

问题

无法使引导网格正常工作
通过从＆＃34; a＆＃34;移出我的编辑/删除按钮，不确定如何使用引导网格。标签
不知道如何在我的按钮组左侧添加全高边框，因为list-group-item有/ * padding：10px 15px; * /我不想放松

Answer 1

你想要的吗？

只为文本包装锚标记。

＆＃13;

from builtins import str

＆＃13;

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

＆＃13;

应用bootstrap网格并不是按照需要工作

1 个答案: