Bootstrap - 表单控件中的进度条

Question

我有一个问题，如何将 bootstrap 进度条放入表单控件中？我正在尝试用进度条做一个密码强度指示器，但是当我将进度条放入表单控件时，它总是显示为已满，即使进度条的值为 0%；

Screenshot

代码(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。)

首先，除了 .form-control 和 .input-group-addon 的 class 之外，您不应该在 .input-group 中放置任何其他内容=]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 - 表单控件中的进度条

Bootstrap - Progress bars in form-control

forms

twitter-bootstrap

progress-bar