html - BootStrap 3 进度条标签切断-6ren

html - BootStrap 3 进度条标签切断

转载作者：行者123 更新时间：2023-11-28 04:12:49

我正在尝试创建一个进度条，无论进度条的大小如何，它都能完全显示文本。我不确定要添加哪些选项，以便 Java 应用程序开发下的跨度文本可以大于进度条本身。

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}

.header {
    text-align: center;
    line-height: 4px;
}

.name {
    text-transform: uppercase;
    font-size: 32px;
}

.summary h2, .skills h2, .professionalhistory h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
}

.skills {
    line-height: 13px;
}

.skills p {
    margin: 8px 8px 8px 8px;
}

.progress {
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}

.progress span {
    display: inline;
    position: absolute;
    color: black;
}

.progress-bar {
    text-align: left;
    position: relative;
    line-height: 13px;
    padding: 0px 10px;
}

.progress-bar span {
    display: inline;
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<div class="skills" style="line-height: 13px;">
    <h2 style="text-align: center; text-transform: uppercase; font-size: 24px;">Possesses Advance Knowledge Of</h2>
    <div class="row">
        <div class="col-lg-4">
            <p style="margin: 8px 8px 8px 8px;">Java Application Development</p>
            <div class="progress" style="text-align: left; position: relative; height: 13px; margin: 8px 8px 8px 8px;">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%; padding: 0px 10px;">
                    <span style="display: inline;">1 Years</span>
                </div>
            </div>
        </div>
    </div>
</div>

最佳答案

一种可能的解决方案如下。这就是变化

.progress-bar span {
        position: absolute;
        z-index: 2;
        color: black;
        top: 50%;
        left: 0%;
        transform: translate(0%,-50%);
}

.resume {
    width: 816px;
    margin: 48px 48px 48px 48px;
    font-size: 13px;
    line-height: 16px;
}

.header {
    text-align: center;
    line-height: 4px;
}

.name {
    text-transform: uppercase;
    font-size: 32px;
}

.summary h2, .skills h2, .professionalhistory h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 24px;
}

.skills {
    line-height: 13px;
}

.skills p {
    margin: 8px 8px 8px 8px;
}

.progress {
    text-align: left;
    position: relative;
    height: 13px;
    margin: 8px 8px 8px 8px;
}

.progress-bar {
    text-align: left;
    line-height: 13px;
    padding: 0px 10px;
}

.progress-bar span {
    position: absolute;
    z-index: 2;
    color: black;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
}

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<div class="skills">
    <h2>Possesses Advance Knowledge Of</h2>
    <div class="row">
        <div class="col-lg-4">
            <p>Microsoft Operating Systems</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Office SharePoint Services</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:53.85%">
                    <span>7 Years</span>
                </div>
            </div>
            <p>Microsoft Active Directory</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Exchange Services</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Microsoft Office Suite</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Cisco Networking Devices</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>VMWare Products</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <p>Project Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%">
                    <span>5 Years</span>
                </div>
            </div>
            <p>Personnel Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Training and Development</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Customer Service Relations</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:61.54%">
                    <span>8 Years</span>
                </div>
            </div>
            <p>Performance Management</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Oral Expressive</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Critical Thinker</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <p>Complex Problem Solver</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Attention to Detail</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:100.00%">
                    <span>13 Years</span>
                </div>
            </div>
            <p>Sandler Sales Concepts</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:23.08%">
                    <span>3 Years</span>
                </div>
            </div>
            <p>Visual Basic for Applications</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:69.23%">
                    <span>9 Years</span>
                </div>
            </div>
            <p>Java Application Development</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:7.69%">
                    <span>1 Years</span>
                </div>
            </div>
            <p>Microsoft Visual Studio</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:84.62%">
                    <span>11 Years</span>
                </div>
            </div>
            <p>Microsoft SharePoint Designer</p>
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="13"aria-valuemin="0"aria-valuemax="13" style="width:38.46%">
                    <span>5 Years</span>
                </div>
            </div>
        </div>
    </div>
</div>

关于html - BootStrap 3 进度条标签切断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42636090/

文章推荐： javascript - 动态表格多个输入字段计算

文章推荐： javascript - es6模块中导出对象的正确方法

jquery - 在我的网页上显示动态数据(进度)
我正在开发一个在 gridview 中显示数据表内容的网页。而且，还有一个名为“发送到 Excel”的按钮。如果用户单击此按钮，该程序将开始生成报告(将数据表内容写入 excel 文件)。完成后，会出
javascript - promise 进度
理论:我在开始时做出了大约 100 个 promise ，然后使用 Promise.all() 解决它们。这 100 个 promise 中的每一个依次进行一些异步 REST 调用，其响应可能主要不
Python tarfile 进度
在将文件添加到 python 中的 tar 存档时，是否有任何库可以显示进度，或者可以扩展 tarfile 模块的功能来执行此操作？在理想情况下，我想展示 tar 创建的总体进度以及关于何时完成的预
xcode - 进度 View xcode的高度
有没有办法在 Xcode 中更改进度 View 栏的高度？我正在使用 Xcode 4.3 并且需要一个垂直进度条。我旋转了栏，但现在无法更改高度并且显示为一个圆圈。还有一种更有效的旋转进度条的方法
Swiftui 进度 View 隐藏
您好，我想在栏按钮项上制作未确定的进度 View 。完成后我想让它隐藏，但 hidden() 方法没有像 disabled(Bool) 这样的参数。任务完成后如何隐藏进度 View ？这就是我要的
Django - 显示 Action 进度
我有一个管理员控制的功能(导入数据库)可能需要一些时间才能完成，所以我想在这段时间内向用户显示一些反馈 - 例如进度条，或者只是一些消息。即使在长时间的 Action 中分部分发送页面也足够了。在
progress-4gl - 进度 if 语句
我是一个进步的菜鸟，实际上在基本 block 方面有问题。下面的问题是在我的 if else 语句中。它在 if, then, else then 时工作正常，但是当我想将多个语句放入 if 部分时
unix - 如何在没有回车的情况下显示日志文件的 rsync 进度？
我有一个来自 rsync 命令的日志文件，其中有进度。运行此进度时，会更新同一行上的显示信息。当我捕获此命令的输出时，我得到一个在终端上使用 cat 正常显示的文件(重播所有退格键和重新编辑)但我希望
delphi - 如何显示长时间过程的 GUI 进度？
我需要处理一些数据，每 5-10 秒显示一个进度(我以 % 显示进度，但我也更新了一些图表)。我想在没有多线程的情况下做到这一点。循环可能相当大。它可以从数百万开始，可以高达数十亿。我可以使用 G
javascript - 重新加载页面而不影响 YouTube 进度
我正在致力于使用 PHP、HTML 和 JavaScript 制作半直播互联网 channel 。您可以在此处查看演示:http://mariocreative.host/chanelko/inde
wpf 动画加载 'dot' 进度
我实际上正在使用图像为“点点点”进度设置动画。我想通过使用下面的代码来使用不透明度。动画将持续 3 秒，有没有更简单的动画方法？最佳答案这是一个快速版本，它会在控
c - 如何在C中保存do...while状态/进度？
我写了这个程序，它返回用户插入的最大整数。现在，我希望程序返回第二大整数。我创建了一个新变量(称为“状态”)，该变量应该在每次循环重复时增加 1 个单位。然后，在中断条件发生后，我将在状态变量中后退
java - 是否可以在没有外部文件的情况下保存 Java 进度？
我正在制作一个需要保存进度的java游戏。但我不想让外部文件保存进度(像《我的世界》这样的游戏有一个存储文件的“保存”目录)。所以基本上我希望它存储一些数据，当用户退出并再次返回时可以检索这些数据。比
android - 获取 RenderScript 进度
我正在使用 forEach_root 方法在 Android 上计算图像。 RenderScript RS=RenderScript.create(context); Allocation inPix
ios - 进度 View 循环
我希望这个进度 View 在完成后基本上“重置”。尝试将计数重置为 0，它确实重置了，但是对于每次重置，计时器只会变得越来越快。 .h @property (nonatomic, strong) N
java - Wicket - 进度/多个标签更新
我不确定这是否可能。当您单击“提交”按钮时，似乎有一种方法可以做到这一点。 private Button getButton(String id) { return new AjaxButto
ios - 在循环期间更新 UIProgressBar 进度
我找不到关于如何在迭代循环时更新 UIProgressbar 进度的明确答案，例如: for (int i=0;i
ios - 进度 View 翻转和缩放
我正在尝试在 Xcode 中翻转 UIProgressView 180，同时我正在尝试缩放进度 View 。在我添加翻转之前缩放效果很好，然后缩放不再起作用。有什么建议么？谢谢! [self.seco
ios - 进度 HUD 显示太晚
我目前正在通过评估 prepareForSegue 中的 segue.identifier 动态加载新 View : - (void)prepareForSegue:(UIStoryboardSegu
ios - 进度 View 无限步？
当任意进程发生时，我需要在屏幕上为用户提供状态。我无法知道需要多长时间。我怎样才能永远增加 progressView (当它接近 1 时它会减慢)。最佳答案 This如果您愿意更换进度 View ，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - BootStrap 3 进度条标签切断