Question

我无法使图标保持在右侧与文本对齐，并且图标之间有一些边距。我也试图在li的左边放一个数值（1,2 ... n），但是bootstrap文档似乎没有。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<li class="list-group-item justify-content-between">test1<div class="text-right"><a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test1" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test2<div class="text-right"><a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test2" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test3<div class="text-right"><a class="action-icon" id="delete-test3" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test3" name="test1"><span class="fa fa-edit"></span></a></div></li>

＆＃13;

Answer 1

您需要将float:right添加到图标div

.text-right{
  float: right;
  clear: both;
}

.text-right a{
  margin: 0 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<li class="list-group-item justify-content-between">test1<div class="text-right"><a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test1" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test2<div class="text-right"><a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test2" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test3<div class="text-right"><a class="action-icon" id="delete-test3" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test3" name="test1"><span class="fa fa-edit"></span></a></div></li>

Answer 2

您可以使用pull-right而不是text-right

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<li class="list-group-item justify-content-between">test1<div class="pull-right"><a class="action-icon" id="delete-test1" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test1" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test2<div class="pull-right"><a class="action-icon" id="delete-test2" name="test2"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test2" name="test1"><span class="fa fa-edit"></span></a></div></li>
<li class="list-group-item justify-content-between">test3<div class="pull-right"><a class="action-icon" id="delete-test3" name="test1"><span class="fa fa-trash"></span></a><a class="action-icon" id="edit-test3" name="test1"><span class="fa fa-edit"></span></a></div></li>

＆＃13;

Answer 3

基本上，您需要为display: list-item;项添加li以获取数字，您可以在图标上使用边距和浮点数来对齐它们。

.text-right{
  float: right;
  clear: both;
}
.text-right a{
  margin: 0 10px;
}
.list-item {
    display: list-item !important;
    list-style-type: decimal
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<li class="list-group-item justify-content-between list-item">test1
  <div class="text-right">
    <a class="action-icon" id="delete-test1" name="test1">
      <span class="fa fa-trash"></span>
    </a>
    <a class="action-icon" id="edit-test1" name="test1">
      <span class="fa fa-edit"></span>
    </a>
  </div>
</li>
<li class="list-group-item justify-content-between list-item">test2
  <div class="text-right">
    <a class="action-icon" id="delete-test2" name="test2">
      <span class="fa fa-trash"></span>
    </a>
    <a class="action-icon" id="edit-test2" name="test1">
      <span class="fa fa-edit"></span>
    </a>
  </div>
</li>
<li class="list-group-item justify-content-between list-item">test3
  <div class="text-right">
    <a class="action-icon" id="delete-test3" name="test1">
      <span class="fa fa-trash"></span>
    </a>
    <a class="action-icon" id="edit-test3" name="test1">
      <span class="fa fa-edit"></span>
    </a>
  </div>
</li>

make元素向右移动

3 个答案: