Question

我有一个li（列表项），其中包含四个元素。我希望左边的2个元素和右边的2个元素。 li是使用Bootstrap框架和FontAwesome项目的页面的一部分：http://pctechtips.org/apps/todo/ 这是李

<li class="list-group-item d-flex justify-content-between align-items-center">
 <i class="fa fa-plus-square-o" aria-hidden="true"></i> Pay Car Insurance
 <i class="fa fa-pencil" aria-hidden="true"></i>
 <i class="fa fa-trash-o" aria-hidden="true"></i>
</li>

Answer 1

<li class="list-group-item  justify-content-between align-items-center">
    <i class="fa fa-plus-square-o left" aria-hidden="true"></i> 
    <span class="left marg_left">Pay Car Insurance </span>
    <i class="fa fa-pencil right marg_left" aria-hidden="true"></i>
    <i class="fa fa-trash-o right  " aria-hidden="true"></i>
</li>

在css ::

中

.marg_left {
    line-height: 16px;
    margin-left: 12px;
}

.left {
    float: left;
}

.right {
     float: left;
}

.marg_right{
     margin-right:12px;
}

Answer 2

在你的情况下你唯一需要做的就是（只使用本机 Bootstrap 4 类而没有任何css黑客攻击）是添加ml-auto（margin-left）：auto）类到第三个元素，即铅笔图标。

然后，您只需向两者添加pr-3（填充右侧）类，即可向加号和铅笔图标添加一些填充。那就是它！

这是工作代码：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="row">
        <div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
            <h1 class="heading-4">Todo List Items</h1>
            <ul id="list" class="list-group mt-4 pb-4">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i>Pay Car Insurance
                    <i class="fa fa-pencil ml-auto pr-3" aria-hidden="true"></i>
                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                </li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

如果您想将这些图标转换为链接，您需要将ml-auto类添加到锚中，如下所示：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="row">
        <div class="add-item text-center col-sm-12 col-md-10 col-lg-8 mb-4">
            <h1 class="heading-4">Todo List Items</h1>
            <ul id="list" class="list-group mt-4 pb-4">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <a href="#"><i class="fa fa-plus-square-o pr-3" aria-hidden="true"></i></a>Pay Car Insurance
                    <a href="#" class="ml-auto pr-3"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                    <a href="#"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
                </li>
            </ul>
        </div>
    </div>
</div>

＆＃13;

Answer 3

您可以尝试添加class="pull-right"或class="pull-left"

如何使用图标和标题正确设置列表项的样式

3 个答案: