Question

我有一个问题，如何将引导进度条放入表单控件？我尝试使用进度条来设置密码强度指示器，但是当我将进度条放入表单控件时，它总是显示为已满，即使条的值为0％;

代码（HTML）：

<div class="input-group">
    <span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
    <input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
    <div class="progress-bar form-control">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
    </div>
</div>

Answer 1

这非常简单：您不将.progress-bar放入.form-control。

您需要更加关注Bootstrap标记。（或者它背后的CSS。）

首先，你不应该在.input-group s中放置任何其他内容，而不是一个<input>以及.form-control和.input-group-addon s的类别或input之后。

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

如果您想再次放置进度条，则需要注意Bootstrap标记。您已将其包装在.progress包装器中：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

您可以将它们组合在一起，并将它们包裹在.form-group中。因此，您的初始标记应替换为：

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
    <input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="sr-only">Password security 0%</span>
    </div>
  </div>
</div>

Bootstrap - 表单控件中的进度条

1 个答案: