【问题标题】:Bootstrap3 add an icon in front of the tableBootstrap3在表格前添加图标
【发布时间】:2015-12-01 04:24:12
【问题描述】:

我正在尝试在表格前面添加一个图标。

<div class="row">
<div class="col-xs-offset-8 col-xs-4">
    <span class="fa fa-pencil pull-left"></span>
    <table class="table table-condensed table-bordered">
        <thead>
            <th class="text-center">Date</th>
        </thead>
        <tbody>
            <tr>
                <td class="text-center">01/01/2015</td>
            </tr>
        </tbody>
    </table>
</div>

我需要一支铅笔在表格左侧与“日期”在同一行 任何帮助将不胜感激

【问题讨论】:

    标签: html twitter-bootstrap html-table icons


    【解决方案1】:

    定位元素的最佳技巧之一是使用topposition 属性。

    为了给铅笔腾出空间,我们在表格中添加了左边距。我们为铅笔提供相对定位,并将其放置在距顶部 20 像素处。

    现在它出现在表格的外面和左侧。

    .fa-pencil {
      top: 20px;
      position: relative;
    }
    
    table {
      margin-left: 20px;
    }
    

    http://jsfiddle.net/a00ykzy0/1/

    【讨论】:

    • 谢谢,但这不是我需要的。
    • 我需要铅笔在表格边框之外。它假设表明您可以编辑表格。该表有 5 个 td,为了清楚起见,我没有包括在内。
    • 对不起,我太快了。这没用。桌子向右移动并超出“工作区”。你也可以在 jsfiddle 上看到。
    猜你喜欢
    • 1970-01-01
    • 2022-06-15
    • 2019-07-16
    • 2020-12-22
    • 2020-05-05
    • 1970-01-01
    • 2017-12-11
    • 2020-06-24
    • 1970-01-01
    相关资源
    最近更新 更多