Bootstrap进度条中的文本被剪裁

vxqlmq5t 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(135)

我在bootstrap的进度条上遇到问题。我想在里面显示的跨度文本只显示了下半部分，我不知道为什么。
我正在做一个代码沿着我的课程，我已经彻底检查了它，看不到任何差异的代码。
我们的思想是不同的。他用cloud9，我用codeanywhere。我不认为这有什么关系。
我试着继续编写代码，并添加CSS，认为它可能会解决问题。但问题依然存在

代码片段

.progress {
  position: relative;
  height: 25px;
  margin-bottom: 4px;
}

.progress-type {
  position: absolute;
  left: 0px;
  font-weight: 400;
  padding: 3px 30px 2px 10px;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}

<div class="row">
  <div class="col">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
        <span class="sr-only">90% Complete</span>
      </div>
      <span class="progress-type">HTML / HTML5</span>
    </div>
  </div>
</div>

<!-- Bootstrap 5.3 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/77051732/text-in-bootstrap-progress-bar-is-clipped

2条答案

按热度按时间

dojqjjoe1#

这不是Bootstrap或身高问题。这是一个如何将绝对位置元素居中的问题。（根据HTML规范，这样一个元素的父元素不会展开来包含它。）使用一个更标准的方法（不是padding）就可以了。
How to center div vertically inside of absolutely positioned parent div

.progress-type {
  position: absolute;
  left: 0;
  top: 50%; /* put the top edge half way down */
  transform: translateY(-50%); /* shift the text up half its height */
  padding: 0 30px 0 10px;
  font-weight: 400;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="progress position-relative">
        <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
          <span class="sr-only">90% Complete</span>
        </div>
        <span class="progress-type">HTML / HTML5</span>
      </div>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

赞(0）回复(0）举报 2023-09-28

9q78igpj2#

如果我覆盖Bootstrap并使用!important强制高度，它就可以工作。

.progress {
  position: relative;
  height: 25px !important;
  margin-bottom: 4px;
}

.progress-type {
  position: absolute;
  left: 0px;
  font-weight: 400;
  padding: 3px 30px 2px 10px;
  color: #fafafa;
  background-color: rgba(25, 25, 25, 0.2);
}

<div class="row">
  <div class="col">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
        <span class="sr-only">90% Complete</span>
      </div>
      <span class="progress-type">HTML / HTML5</span>
    </div>
  </div>
</div>

<!-- Bootstrap 5.3 -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/boo[email protected]/dist/js/bootstrap.bundle.min.js"></script>

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap进度条中的文本被剪裁

2条答案

相关问题

热门标签

最新问答